Snippet

Extracting Reusable State into a Custom Hook Pattern

The Custom Hook design pattern extracts stateful component logic into reusable functions starting with the 'use' prefix. This separation of concerns allows multiple components to share state behavior without duplicating code or modifying component hierarchies.

snippet.js

javascript

import { useState } from 'react';
 
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(prev => prev + 1);
  const reset = () => setCount(initialValue);
  return { count, increment, reset };
}
 
export default useCounter;

react

Breakdown

function useCounter(initialValue = 0) {

Defines a custom hook following standard naming conventions with an initial parameter.

const [count, setCount] = useState(initialValue);

Maintains encapsulated numeric state within the custom hook instance.

const increment = () => setCount(prev => prev + 1);

Encapsulates state mutation logic within a reusable helper function.

return { count, increment, reset };

Returns state values and updater functions bundled inside a plain object.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Extracting Reusable State into a Custom Hook Pattern

Related