Rethinking Components with React Hooks

React Hooks have been around since React 16.8 and remain as popular and in demand as ever. They have introduced a completely new way of handling components in React, which may lead you to reevaluate your approach to coding on a fundamental level. Having already been established as the most beloved front-end framework according to Stackoverflow popularity polls, React went above and beyond with the introduction of Hooks.

At first glance, React Hooks may seem as an alternative to classes or even straight-out replacement. Many have expressed that opinion, however, that is wrong. React Hooks in no way are equivalent to classes. The concept is different, as well as realization, so what might look similar on the surface, is an entirely new concept when it comes to practice.

With Hooks, there’s a need for a declarative approach with its strict mathematical logic. In the new release, React changed the approach to Functional programming, leaving OOP out of the spotlight where it’s been comfortably residing since its rise in popularity in the 80s. This presented itself in a few ways. Functions are now at the centre-point in React, shifting the focus away from classes. As a result, we have a completely different method of rendering, which we’ll illustrate with the following examples.

Let’s start with the classes. We define a component with a start value of zero and also use

componentDidMount

to set a timeout when the state reaches the value of 5000.

export default class App extends React.Component {

  state = {value:0}
  componentDidMount() {
  setTimeout(() => 
    console.log(this.state.value), 5000);
}

Our component is a button that will return the number of clicks on each render, triggered by the change in state. With each

onClick

the value changes to

value +1

render() {
	return (
		<button
		onClick={
() => this.setState(({ value }) => ({ value: value + 1 }))}
		>
                        click on me
		</button>
	)
}

This global object within the component (class) is a singleton with the link to the state at every instance. It will be the same in each render, meaning if you open the page and click the button a few times, the number that’ll appear in the console will show you how many times exactly you clicked the button. This shows how the renders refer to a single object.

With Hooks, the result will be quite different and more alike the functions in JS. On each render, a new environment will be produced, so each time you’ll be getting a new set of data.

Let’s take a look at the example.

We set the initial state as zero with the help of

useState

hook.

export default function App() {
	let [state, setState] = React.useState({ count: 0 });
        }

Then we use the

useEffect

hook to set a timeout for when the number of clicks gets to 5000. In the previous example, we achieved this by using

componentDidMount

React.useEffect(() => {
	   setTimeout(() => {
		  console.log(state.count);
	   }, 5000);
}, []);

Again, we’ll be counting the number of clicks on the button with each

onClick

the state changing to

state + 1

	return (
	    <button
		   onClick={() => {
			       setState(state => state +1);
		   }}
	    >
		   increase count
	    </button>
    );

React accounts for all changes in state Hook, calling on the function-component each time render is triggered. This means that all variables and functions are in closure and therefore different on each render.

What it means in practice, is that, if we take the same example, but express it using React Hooks, when you click on the button while the render is in progress, you’ll get a zero on the output. On each render, the

state

and

useEffect

will be different.

This is something worth learning and using in your code. If you’re still not sure as to why the need for this change, learn more about React Hooks and the reasoning behind their introduction. You’ll see that Hooks are a great addition to React and once you start using them, you’ll reap the benefit right away.