Module 4 · State that scales Lesson 12 of 15

Custom hooks: your own useSomething

Worked example

useJobs() in one file, called by a list and a detail component, so both get the same loading, error and data handling.

Your practice task

Turn the fetch logic from a component into a useFetch(url) hook and use it in two different components.

Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.

Key takeaway

A custom hook is a function whose name starts with "use" and wraps stateful logic you want in more than one component. It is how fetching, forms and debouncing are shared without copy-paste.

Almost there

15 lessons left of 15

Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.

Next recommended course Full-Stack Web Development Bootcamp