React Custom Hooks (Advanced)

Thus far we’ve covered the two most popular hooks in React: useState and useEffect. useState is used to make your application interactive; useEffect is used to opt into the lifecycle of your components.

We’ll eventually cover more hooks that come with React – though we won’t cover all of them here. Next, we’ll tackle React custom Hooks; that is, building a hook yourself.

We will use the two hooks we already possess to create a new custom hook called useSemiPersistentState, named as such because it manages state yet synchronizes with the local storage. It’s not fully persistent because clearing the local storage of the browser deletes relevant data for this application. Start by extracting all relevant implementation details from the App component into this new custom hook: