Tech I Used Last Week => React Hooks
This article is going to assume you have a working knowledge of React, both functional and Class based components, managing state in class based components, passing props and state. Things like that.
This will be an introduction when it comes to React hooks, and I’m sure there are many people out there who can build on what I write here so much better than I can. Working with React Hooks is the future of writing React code and is something many hiring managers are now mentioning by name in interviews and during technical screenings.
Hooks are the newest addition of React 16.8 so make sure your project is running this version of React before taking the plunge into writing hooks. Better yet start a new project and use create-react-app to get the latest version and all the newest features.
A Few Nice Things About Hooks ( There are many )
You can try hooks in a few components without re-writing a ton of code. They are completely opt-in and aren’t a requirement for writing code in React. Learn at your own pace.
Hooks don’t change React core concepts. Instead they are more direct ways to access React concepts we all know and love props, state, context, refs, lifecycle .
Hooks are backwards compatible. Nothing is going to break by starting to use them in your app. Well... nothing because of Hooks at least.
Why Introduce Hooks at All?
Reuse stateful logic. This won’t be something I’ll cover here, but might be something for another blog. Hooks will allow you to reuse your logic by building your own hooks and using them in the components that need some stateful logic. This makes it easy to share hooks with other part of the application or with the entire dev team.
Complex components are also confusing. Although all of the code is seemingly related to that component, the logic in various lifecycle methods might be covering a few different things. ( fetching data and setting up listeners ). It would be better to leave these separate. Hooks let you split a complex component into smaller functions based on what pieces are related rather than forcing a split based on component lifecycle methods.
So, What Hooks Are There?
useState() is the first hook. It’s called inside of a functional component to add some local state to it. React will preserve this state in-between re-renders.
useState returns a pair: the current state value and a function that lets you update the sate. Think of it as this.setState with one glaring difference. useState doesn’t merge the old and new state together. useState() takes an argument of the starting value for this piece of state.
Above is a simple example of a functional component that creates a piece of state called count. This count can be changed using the setCount function we defined in line 5. ( part of the return pair from the useState() hook)
I know what you’re thinking. What do we do for state with more than one value. Simple …
One thing of note here. The bracketed items when declaring the piece of state [num, setNum] for example. These names are not a part of the React API. You can name these whatever you want ( that’s how you get access to many pieces of state.
The Effect Hook
useEffect let’s you perform side effects in functional components. Data fetching, setting up subscription, and manually changing the DOM are all examples of side effects. useEffect tells React that you have to do something after render and will allow you to write the function for what side effect you want to occur.
An important note… useEffect runs after every render. ( think about it as happening after componentDidMount and componentDidUpdate.
Here’s another example from the React docs that builds on the counter functional component from before.
We declare the count state variable, and then we tell react we need to use an effect. We pass a function to the useEffect hook. The function we pass is in essence the effect. Inside the body of this function we set the document.title . We can read the latest count inside the effect because it’s inside the scope of our function, it will remember the effect we used, and then run our effect after updating the DOM. This with happen for every render including the first.
Cleaning up an effect? Return a function
The React team even included a way to cleanup after the effect when the component is unmounted. To do this return a function that handles cleaning up when the component is unmounted. This feature is incredibly handy because you can keep the logic for adding and removing something in the same effect!
Learning and working exclusively in hooks is something I would like to focus on over the next month and I would like to convert some of my other projects to functional components only and see if I can keep the same functionality.
There is also a way to build your own hooks to work with stateful logic and reuse it in various components by creating your own hook. A topic for another day!
