Fast 3kB alternative to React with the same modern API.

, document.body); ``` That's great. Running this produces the following HTML DOM structure: ```html 10:28:57 PM ``` In order to have the clock's time update every second, we need to know when `` gets mounted to the DOM. _If you've used HTML5 Custom Elements, this is similar to the `attachedCallback` and `detachedCallback` lifecycle methods._ Preact invokes the following lifecycle methods if they are defined for a Component: | Lifecycle method | When it gets called | |-----------------------------|--------------------------------------------------| | `componentWillMount` | before the component gets mounted to the DOM | | `componentDidMount` | after the component gets mounted to the DOM | | `componentWillUnmount` | prior to removal from the DOM | | `componentWillReceiveProps` | before new props get accepted | | `shouldComponentUpdate` | before `render()`. Return `false` to skip render | | `componentWillUpdate` | before `render()` | | `componentDidUpdate` | after `render()` | So, we want to have a 1-second timer start once the Component gets added to the DOM, and stop if it is removed. We'll create the timer and store a reference to it in `componentDidMount()`, and stop the timer in `componentWillUnmount()`. On each timer tick, we'll update the component's `state` object with a new time value. Doing this will automatically re-render the component. ```js import { h, render, Component } from 'preact'; class Clock extends Component { constructor() { super(); // set initial time: this.state = { time: Date.now() }; } componentDidMount() { // update time every second this.timer = setInterval(() => { this.setState({ time: Date.now() }); }, 1000); } componentWillUnmount() { // stop when not renderable clearInterval(this.timer); } render(props, state) { let time = new Date(state.time).toLocaleTimeString(); return { time }; } } // render an instance of Clock into : render(, document.body); ``` Now we have [a ticking clock](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/)! ### Props & State The concept (and nomenclature) for `props` and `state` is the same as in React. `props` are passed to a component by defining attributes in JSX, `state` is internal state. Changing either triggers a re-render, though by default Preact re-renders Components asynchronously for `state` changes and synchronously for `props` changes. You can tell Preact to render `prop` changes asynchronously by setting `options.syncComponentUpdates` to `false`. --- ## Linked State One area Preact takes a little further than React is in optimizing state changes. A common pattern in ES2015 React code is to use Arrow functions within a `render()` method in order to update state in response to events. Creating functions enclosed in a scope on every render is inefficient and forces the garbage collector to do more work than is necessary. One solution to this is to bind component methods declaratively. Here is an example using [decko](http://git.io/decko): ```js class Foo extends Component { @bind updateText(e) { this.setState({ text: e.target.value }); } render({ }, { text }) { return ; } } ``` While this achieves much better runtime performance, it's still a lot of unnecessary code to wire up state to UI. Fortunately there is a solution, in the form of a module called [linkstate](https://github.com/developit/linkstate). Calling `linkState(component, 'text')` returns a function that accepts an Event and uses its associated value to update the given property in your component's state. Calls to `linkState()` with the same arguments are cached, so there is no performance penalty. Here is the previous example rewritten using _Linked State_: ```js import linkState from 'linkstate'; class Foo extends Component { render({ }, { text }) { return ; } } ``` Simple and effective. It handles linking state from any input type, or an optional second parameter can be used to explicitly provide a keypath to the new state value. > **Note:** In Preact 7 and prior, `linkState()` was built right into Component. In 8.0, it was moved to a separate module. You can restore the 7.x behavior by using linkstate as a polyfill - see [the linkstate docs](https://github.com/developit/linkstate#usage). ## Examples Here is a somewhat verbose Preact `` component: ```js class Link extends Component { render(props, state) { return {props.children}; } } ``` Since this is ES6/ES2015, we can further simplify: ```js class Link extends Component { render({ href, children }) { return ; } } // or, for wide-open props support: class Link extends Component { render(props) { return ; } } // or, as a stateless functional component: const Link = ({ children, ...props }) => ( { children } ); ``` ## Extensions It is likely that some projects based on Preact would wish to extend Component with great new functionality. Perhaps automatic connection to stores for a Flux-like architecture, or mixed-in context bindings to make it feel more like `React.createClass()`. Just use ES2015 inheritance: ```js class BoundComponent extends Component { constructor(props) { super(props); this.bind(); } bind() { this.binds = {}; for (let i in this) { this.binds[i] = this[i].bind(this); } } } // example usage class Link extends BoundComponent { click() { open(this.href); } render() { let { click } = this.binds; return { children }; } } ``` The possibilities are pretty endless here. You could even add support for rudimentary mixins: ```js class MixedComponent extends Component { constructor() { super(); (this.mixins || []).forEach( m => Object.assign(this, m) ); } } ``` ## Debug Mode You can inspect and modify the state of your Preact UI components at runtime using the [React Developer Tools](https://github.com/facebook/react-devtools) browser extension. 1. Install the [React Developer Tools](https://github.com/facebook/react-devtools) extension 2. Import the "preact/debug" module in your app 3. Set `process.env.NODE_ENV` to 'development' 4. Reload and go to the 'React' tab in the browser's development tools ```js import { h, Component, render } from 'preact'; // Enable debug mode. You can reduce the size of your app by only including this // module in development builds. eg. In Webpack, wrap this with an `if (module.hot) {...}` // check. require('preact/debug'); ``` ### Runtime Error Checking To enable debug mode, you need to set `process.env.NODE_ENV=development`. You can do this with webpack via a builtin plugin. ```js // webpack.config.js // Set NODE_ENV=development to enable error checking new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('development') } }); ``` When enabled, warnings are logged to the console when undefined components or string refs are detected. ### Developer Tools If you only want to include devtool integration, without runtime error checking, you can replace `preact/debug` in the above example with `preact/devtools`. This option doesn't require setting `NODE_ENV=development`. ## Backers Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/preact#backer)] ## Sponsors Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)] ## License MIT [](https://preactjs.com) [preact-compat]: https://github.com/developit/preact-compat [ES6 Class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes [Functional Components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components [hyperscript]: https://github.com/dominictarr/hyperscript [preact-boilerplate]: https://github.com/developit/preact-boilerplate [lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html