REACT Free Section Starter Challenge 35 min

5. Building Reusable Custom Hooks

Overview: Encapsulate and share complex component state logic by authoring clean custom React hooks.

Concept & Syntax Guide

Custom hooks are JavaScript functions whose names start with `use` and that can call other hooks like `useState` and `useEffect`. They let you extract and reuse stateful logic without duplicating UI components.

Hands-On Practice Exercise

Build a useCounter Custom Hook

Create a `useCounter(initialValue)` hook that returns `{ count, increment, decrement }`. Call the hook and display the initial count.

Target Output: Initial Counter State: 5

Need a hint? Click here to reveal

Hint: Check syntax carefully and make sure your code contains: Initial Counter State: 5

REACT Code Editor

1
2
3
4
5
6
7
8
9
10

function useCounter(initialValue = 0) {
  let count = initialValue;
  return {
    getCount: () => count,
    increment: () => ++count
  };
}

const counter = useCounter(5);
console.log('Initial Counter State: ' + counter.getCount());