paint-brush
Rethinking Components with React Hooksby@yurakovalchuk
357 reads
357 reads

Rethinking Components with React Hooks

by yurakovalchukMay 20th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

React has introduced a completely new way of handling components in React. 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. This means that all variables and functions are in closure and therefore different on each render. The result will be quite different and more alike the functions in JS, so each time you’ll be getting a new set of data.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Rethinking Components with React Hooks
yurakovalchuk HackerNoon profile picture

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.