We’ll start by quickly going over the new additions in React 16.6 and then we’ll jump to the recently famous React Hooks.

React.memo

For those who are familiar with React, one can improve a React app just by simply avoiding re-renders. A wasted render happens when a component is rendered with the exact same input data and gives exactly the same output. Most of the times, it’s just a matter of replacing React.Component with React.PureComponent , assuming the props are immutable and not deeply nested.

For functional components there was not a way to optimize re-renders as they’re just functions. By using recompose and the onlyUpdateForKeys HOC, functional components would assume the same behaviour as PureComponent but behind the curtains it’s just wrapping the Functional Component in a React Class.

React.memo works differently as it does not prevent a re-render but simply memoizes (caches) the result of a function call if the same arguments were passed. It works similarly as PureComponent has the props are shallowly compared, meaning that it compares by reference and not value (like most memoize libs)

On the example above, if name and price stay the same, the result of that function call (which returns some JSX) will be returned from cache and it doesn’t need to recalculate the JSX again. Of course not all functional components need to be memoized, this serves just as an example.

React.memo is already available in React 16.6

React.lazy

With the new Suspense mechanic working behind the scenes, you can use React.lazy to do code-splitting extremely easily.

React suspense and code-splitting

You can load other components on demand and show a loading indicator while it’s loading. This will do code splitting and your main bundle size will be reduced.

React.lazy is already available in React 16.6

Hooks

From the React Conf presentation and the documentation we could see that there’s a big plan for Functional Components. Don’t worry, classes will still be there — in the foreseeable future. The main motivations for providing functional components with already existing React features (for Class components) are:

Difficulty on reusing stateful logic between components (wrapper hell with render props and HOC’s);

Complex components are hard to understand (lifecycle spaghetti);

Classes are hard for readability and for (machine) optimizations;

useState

With useState (documentation) React gives us a way to turn a stateless functional component into a stateful one without turning it into a class. We could already do something similar with recompose and withState but like the previous case, it just wraps the functional component with a Class Component where the state is.

As I’m writing this post, the recompose team commented on React Hooks and how they plan to stop introducing new features and general maintenance of the library. Read here.

Calling useState with the initial value returns an array where the first element is the value itself and the second one is the setter function.

These hooks are also meant to be created for singular use-cases and can be reused in any functional component.

In the code above we extracted the useCounter hook that can now be used by any functional component. This hooks maintains a counter and provides 2 auxiliary functions, one to increment and the other to decrement the counter.

There’s also the useEffect hook but we’ll dive into it at a later time. In short, it’s a way to deal with side effects in functional components, by letting us tap into lifecycle methods.

If you want to play around with the code check the Codesandbox project below.

Dan Abramov presented the following example in his presentation, using all the new functions useEffect useState and useContext .

Now the same code but using functional components and Hooks. If you look closely, there’s no class!