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!
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
const [counter, setCounter] = useState(0);
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.