The Difference Between this.setState & React Hooks.

Recently I have been getting back into React a little more. While I’m at work I get to code in my free time and I also help others with their code. Lately I’ve noticed more and more people are using Hooks. When I was learning React we didn’t have them, and had to resort to this.setState() within a callback function. So today we are going to look at what a hook does, how it’s syntax works, and where do we use it.

handleClick = () => {
  this.setState({
  color: this.props.color
  })
}

Above is an example of how we use a callback function within React. In this callback function handleClick, we are setting state of something perhaps a div when it is clicked and using the built in setState method. Conventionally this is still an acceptable method within programming. However, there are a few setbacks.

1. You have to initialize the state through a constructor function.
2. Then you have to handle the callback function
3. And you can only use this method in a Class Component in React.

Now let us take a look at how we could set up a hook in React.

import React, {useState} from 'react';
function Counter(){
const [count, setCount] = useState(0)
  return(
    <div>
       <p>You Clicked the button {count} times!</p>
       <button onClick={() => setCount(count + 1)}>
       Click Me! 
       </button>
   </div>

 )
}

OK! So let’s break this down…

1. So right off the bat we are importing useState from the React library that lets us utilize the hook in general.
2. Then through destructuring we are setting a variable of ‘count’ and passing in a method ‘setCount’ which is similar to this.setState() and then we are setting state to 0 on each render.
3. Then for the button we are passing in a onClick function, so that when the user clicks the button we increase the value of state of count by 1 and using that setCount function in an anonymous callback function.
4. Then we through JSX we are interpolating the value of count on the page to display current state.

So initially the first thing you should notice is there is no Class Component, it's already more lightweight, this is why functional components are taking over in React. Next we are using useState to set up our hook and not a constructor function, and we don't have to set up an object to initialize state. Then we do not have to render() explicitly. Seeing as we are using a Functional Component we can just return JSX and have React handle the rest for us.

Already we can see the benefits of using useState and hooks. Our code is much smaller than that of a Class Component, making it easier for us to find and debug code. All in all I would say learn how this.setState works for us in Class Components, before jumping right into hooks. Hooks may seem magical, but they are essentially doing the same thing in this.setState only with less code.

I hope you enjoyed this breakdown of how Hooks are structured in React. There are many, many, many more examples of how we can use Hooks. This is just scratching the surface for now. I have seen hooks that would make your head spin! So keep practicing!!