Creating Custom Hooks

Custom hooks allow us to reuse stateful logic across multiple components. To create a custom hook, we simply create a function starting with use. The easiest example of a custom hook is creating a reusable toggle state:

js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function useToggle(initialState = false) {
  const [state, setState] = useState(initialState);
  const toggleFunction = () => setState(state => !state);
  return [state, toggleFunction];
}

function Main(props) { 
  const [ state, toggle ] = useToggle();
  return ( 
    <button onClick={toggle}>
      {state ? "Turn Off" : "Turn On"}
    </button>
  );
}

In the above code, we create our custom Hook function called useToggle. We create a state variable inside that function and assign a value of false (by default) to that state variable, apart from that, we also create an inline function that can be used for toggling the state variable's value.

We return both of these in an array where the first value is the state variable's reference, and the second is the function.

Using this custom hook, we can now create multiple independent togglable states in different (or the same) component(s) with ease:

js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function useToggle(initialState = false) {
  const [state, setState] = useState(initialState);
  const toggleFunction = () => setState(state => !state);
  return [state, toggleFunction];
}


function OneButton(props) {
  const [ state, toggle ] = useToggle();
  return ( 
    <button onClick={toggle}>
      {state ? "Turn Off" : "Turn On"}
    </button>
  );
}

function TwoButtons(props) {
  const [ state_1, toggle_1 ] = useToggle();
  const [ state_2, toggle_2 ] = useToggle();
  return ( 
    <div>
      <button onClick={toggle_1}>
        {state_1 ? "Turn Off" : "Turn On"}
      </button>
      <button onClick={toggle_2}>
        {state_2 ? "Turn Off" : "Turn On"}
      </button>
    </div>
  );
}

function Main(props) { 
  const [ state, toggle ] = useToggle();
  return ( 
    <div>
      <TwoButtons />

As you can see, each button can be independently turned off/on :