At this point in your React journey, you should be familiar with the basics of React hooks. Remember, hooks allow us to perform essential logic with our function components. These actions include managing state with useState() and executing code after a render with useEffect(). In this lesson, we are going to build on these basic hooks and learn how to create our own custom hooks!
Custom hooks are functions that encapsulate logic using other React hooks. They behave just like hooks built into React, but they allow us to combine and reuse them to reduce logic complexity and repetition. Custom hooks aren’t a new feature of React — they are a convention used widely in the React world. By learning this convention, you can join your fellow React developers in creating and using custom hooks!
Along the way to creating our own custom hooks, we will practice and review some basic concepts about hooks. Specifically, we’ll review how effect hooks work under the hood as well as the rules that all hooks must follow. With these skills, we can begin creating our own custom hooks. Let’s get started!
Instructions
First, let’s take a look at how this application uses the useState() hooks. In the code editor, you will see that we are initializing the counter state with a default value of 0.
Below the counter instantiation, uncomment the useEffect() and the setCounter statement. This useEffect() will run every render since there are no dependencies. Press “Run” to see how the effect changes our counter state.