Examples Of Hooks

React Hooks have revolutionized the way developers build and manage state in functional components. Introduced in React 16.8, hooks provide a more intuitive and powerful way to handle side effects, state, and other component logic. One of the most compelling features of hooks is their ability to reuse logic across different components, making code more modular and easier to maintain. In this post, we will delve into the world of React Hooks, exploring various examples of hooks and their practical applications.

Understanding React Hooks

React Hooks are functions that let you use state and other React features without writing a class. They allow you to use state and other React features in functional components, making them more powerful and flexible. The most commonly used hooks are useState and useEffect, but there are many others that cater to specific needs.

Examples Of Hooks

Let’s start with the basics and then move on to more advanced examples of hooks.

useState Hook

The useState hook is used to add state to functional components. It returns a state variable and a function to update it. Here’s a simple example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

export default Counter;

In this example, the useState hook initializes the state variable count to 0. The setCount function is used to update the state.

useEffect Hook

The useEffect hook is used to perform side effects in functional components. It takes two arguments: a function that contains the side effect logic and an array of dependencies. Here’s an example:

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty dependency array means this effect runs once after the initial render

  return (
    

      {data ? 
{JSON.stringify(data, null, 2)}
 : 'Loading...'}
    
  );
}

export default DataFetcher;

In this example, the useEffect hook fetches data from an API and updates the state with the fetched data. The empty dependency array ensures that this effect runs only once after the initial render.

useContext Hook

The useContext hook is used to access the context value in a functional component. It allows you to share values like these between components without having to explicitly pass a prop through every level of the tree. Here’s an example:

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return I am styled by theme context!;
}

function App() {
  return (
    
      
    
  );
}

export default App;

In this example, the useContext hook is used to access the theme value from the ThemeContext. The ThemedButton component uses this value to style itself.

useReducer Hook

The useReducer hook is an alternative to useState for managing complex state logic. It takes a reducer function and an initial state, and returns the current state and a dispatch function. Here’s an example:

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    

      
Count: {state.count}
       dispatch({ type: 'increment' })}>+
       dispatch({ type: 'decrement' })}>-
    
  );
}

export default Counter;

In this example, the useReducer hook is used to manage the state of a counter. The reducer function handles the logic for incrementing and decrementing the count.

useCallback Hook

The useCallback hook is used to memoize callback functions. It returns a memoized version of the callback that only changes if one of the dependencies has changed. This can help optimize performance by preventing unnecessary re-renders. Here’s an example:

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  return (
    

      
Count: {count}
      
    
  );
}

function ChildComponent({ increment }) {
  console.log('ChildComponent rendered');
  return Increment;
}

export default ParentComponent;

In this example, the useCallback hook is used to memoize the increment function. This prevents the ChildComponent from re-rendering unnecessarily when the ParentComponent re-renders.

useMemo Hook

The useMemo hook is used to memoize expensive calculations. It returns a memoized value that only re-computes when one of the dependencies has changed. Here’s an example:

import React, { useState, useMemo } from 'react';

function ExpensiveCalculation({ num }) {
  const result = useMemo(() => {
    let sum = 0;
    for (let i = 0; i < num; i++) {
      sum += i;
    }
    return sum;
  }, [num]);

  return 
Result: {result}
;
}

function App() {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
      
    
  
  );
}

export default App;

In this example, the useMemo hook is used to memoize the result of an expensive calculation. This prevents the calculation from being re-computed unnecessarily when the component re-renders.

Custom Hooks

Custom hooks allow you to extract and reuse stateful logic across different components. They are simply JavaScript functions that use other hooks. Here’s an example of a custom hook that fetches data:

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

function DataFetcher() {
  const { data, loading, error } = useFetch('https://api.example.com/data');

  if (loading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;

  return (
    

      
{JSON.stringify(data, null, 2)}
    
  );
}

export default DataFetcher;

In this example, the useFetch custom hook encapsulates the logic for fetching data from an API. The DataFetcher component uses this custom hook to fetch and display data.

useRef Hook

The useRef hook is used to create a mutable object that persists for the lifetime of the component. It is often used to access DOM elements directly. Here’s an example:

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    

      
      Focus the input
    
  );
}

export default TextInputWithFocusButton;

In this example, the useRef hook is used to create a reference to the input element. The onButtonClick function uses this reference to focus the input element when the button is clicked.

useLayoutEffect Hook

The useLayoutEffect hook is similar to useEffect, but it fires synchronously after all DOM mutations. It is useful for reading layout from the DOM and synchronously re-rendering. Here’s an example:

import React, { useLayoutEffect, useRef } from 'react';

function MeasureExample() {
  const divEl = useRef();

  useLayoutEffect(() => {
    console.log(divEl.current.getBoundingClientRect());
  }, []);

  return 
Hello, world!
;
}

export default MeasureExample;

In this example, the useLayoutEffect hook is used to log the dimensions of a div element after it has been rendered. This is useful for performing measurements that need to be done synchronously.

useImperativeHandle Hook

The useImperativeHandle hook customizes the instance value that is exposed when using ref. It is useful when you need to expose a custom API to parent components. Here’s an example:

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return ;
});

function ParentComponent() {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    

      
      Focus the input
    
  );
}

export default ParentComponent;

In this example, the useImperativeHandle hook is used to customize the instance value exposed by the CustomInput component. The ParentComponent uses this custom API to focus the input element.

useDebugValue Hook

The useDebugValue hook can be used to display a label for custom hooks in React DevTools. This is useful for debugging custom hooks. Here’s an example:

import React, { useState, useDebugValue } from 'react';

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useDebugValue(isOnline ? 'Online' : 'Offline');

  return isOnline;
}

function OnlineStatus() {
  const isOnline = useOnlineStatus();

  return 
{isOnline ? 'Online' : 'Offline'}
;
}

export default OnlineStatus;

In this example, the useDebugValue hook is used to display a label for the useOnlineStatus custom hook in React DevTools. This makes it easier to debug the hook.

useTransition and useDeferredValue Hooks

The useTransition and useDeferredValue hooks are used to manage transitions and deferred values in React. They are particularly useful for improving the performance of applications with large state updates. Here’s an example:

import React, { useState, useTransition, useDeferredValue } from 'react';

function LargeList() {
  const [isPending, startTransition] = useTransition();
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text);

  const handleChange = (e) => {
    startTransition(() => {
      setText(e.target.value);
    });
  };

  const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);

  return (
    

      
      

        {items.map((item, index) => (
          
{item}
        ))}
      
      {isPending && 
Loading...
}
    
  );
}

export default LargeList;

In this example, the useTransition and useDeferredValue hooks are used to manage transitions and deferred values. The LargeList component updates the list of items in a deferred manner, improving performance.

useId Hook

The useId

import React, { useId } from 'react';

function AccessibleForm() {
  const id = useId();

  return (
    

      Name:
      
    
  );
}

export default AccessibleForm;

import React, { useInsertionEffect } from 'react';

function StyleInjector() {
  useInsertionEffect(() => {
    const style = document.createElement('style');
    style.innerHTML = `
      .my-class {
        color: red;
      }
    `;
    document.head.appendChild(style);

    return () => {
      document.head.removeChild(style);
    };
  }, []);

  return 
Styled Text
;
}

export default StyleInjector;

import React, { useSyncExternalStore } from 'react';

function useStore(store) {
  return useSyncExternalStore(store.subscribe, store.getSnapshot);
}

function StoreComponent() {
  const store = useStore(storeInstance);

  return 
{store.state}
;
}

export default StoreComponent;

import React, { useInsertionEffect } from 'react';

function StyleInjector() {
  useInsertionEffect(() => {
    const style = document.createElement('style');
    style.innerHTML = `
      .my-class {
        color: red;
      }
    `;
    document.head.appendChild(style);

    return () => {
      document.head.removeChild(style);
    };
  }, []);

  return 
Styled Text
;
}

export default StyleInjector;

import React, { useInsertionEffect } from 'react';

function StyleInjector() {
  useInsertionEffect(() => {
    const style = document.createElement('style');
    style.innerHTML = `
      .my-class {
        color: red;
      }
    `;
    document.head.appendChild(style);

    return () => {
      document.head.removeChild(style);
    };
  }, []);

  return 
Styled Text
;
}

export default StyleInjector;

Related Terms:

• what are some hook examples
• anecdote writing hook
• examples of hooks in writing
• examples of hooks for introductions
• examples of hook statements
• powerful hook examples