The Rise of Functional Components - React v16.7.0 (now with Hooks!)

Published in

RedLight Blog

4 min readOct 30, 2018

For those who have been following React Conf, a new set of React features were introduced called Hooks. In this post, we’ll briefly introduce React Hooks and how to use them to code without writing a single React Class and some new improvements to Functional Components.

Disclaimer: Hooks are still being proposed, it is not stable code and should be used carefully in production code

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.

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!

Comparison between approaches (Class and Hooks)

It sure looks shorter and cleaner. In my opinion, easier to write and to read. In the end the bundle size will be smaller.

As mentioned on the proposal, there is no plan to remove class components from React and everything is backwards compatible. Hooks are a new step for React and make functional components a lot more powerful. Don’t forget, it’s still a proposal and something might change before an actual release.

Hooks are meant to let you split one component into smaller functions based on what pieces are related (such as fetching data), rather than forcing a split based on lifecycle methods.

Looking for the React Conf 2018 videos? Check https://www.reactjsvideos.com

If you want to read the full RFC or the original documentation from the React team, check the following links:

Who am I?

I’m André Perdigão, a Full-stack developer at Redlight Software, a web and mobile development studio focused on products. We Are Redlight.