It all starts with React v14.
I know what you are thinking, React Hooks are actually a part of v16.6, and that's absolutely correct. But this isn't about the origin of hooks, but rather, on how to get started with them.
React v14 included stateless functional components, which were a more perfomant approach for components that relied only on their props (and had no state).
Some components could then be written as simple, stateless function. Whose output was either static, or depended solely on the component's props. Something like this (a component with an emoji and a button):
import React from 'react'
export default ()=> (
<div className="concept">
<div className="concept-emoji">
🙂
</div>
<button className="concept-button">
Click me
</button>
</div>
)
Although they were, more performant, they had some limitations and the community did not fully embrace them. Stateful components can skip re-renders by implementing the lifecycle method shouldComponentUpdate, which is unavailable for their stateless counterparts. Stateless functions always re-render when their props change, even if it's not necessary.
This was the main flaw of stateless components. On the one hand, they did not handle state, meaning they relied heavily on props, and the number of props could get large very soon. On the other hand, there was no way to optimize these components, and every prop change triggered a re-render.
And that's where hooks come to the rescue. They allow this stateless components to have some sort of state, and listen to specific prop changes, and mutate accordingly. It sort of allows you to add the stateful component features you want to a stateless component.
Let's suppose you had to make the stateless component above change its emoji when the button is clicked, like this:
You could probably handle this by adding a listener prop, and then the parent keeping track of the state and updating the emoji within this component. But adding props to a stateless component can hurt it's performance, since there is no way to optimize them. Also, keep in mind, that you'd have to refactor the parent component as well, which is not always easy to do.
You could rewrite the stateless component as a stateful component and add state. This rewrite should take less than 5 minutes, since it's a very simple component. This just throws away any possible performance gains, and makes the component a lot more complicated for a very subtle change.
But, since we now have hooks, you can add a hook here, and it's the perfect scenario to get started with hooks. The state-hooked component looks like this:
import React from 'react'
import { useState } from 'react'
export default ()=> {
const [happyFace, setHappyFace] = useState(true)
return (
<div className="concept">
<div className="concept-emoji">
{ happyFace ? "🙂" : "🙃" }
</div>
<button
className="concept-button"
onClick={()=> setHappyFace(!happyFace)}
>
Click me
</button>
</div>
)
}
We have not included any new props for the component, and we have not had to refactor it entirely. ¡Yay!
This was the simplest scenario, but hooks allow syncing functional components to props, trigger specific functions only when the component is first mounted... It has a lot of potential and use cases.