React Hook

Other React Hooks

React – useContext Hook

Function components can use the useContext hook to consume values from a React context. Instead of manually passing props down through each level, React Context enables you to communicate values universally across components, such as themes, authentication status, or app settings.

Syntax:

const value = useContext(MyContext);

MyContext: The context object created by React.createContext().
value: The current context value.

Example: Theme Context

1. Create the context


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

// Create the ThemeContext
const ThemeContext = createContext();

// Create a provider component
export function ThemeSetter({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

ThemeContext: Created using createContext().
ThemeSetter: Provider component that uses useState to toggle the theme.

2. Consume the context using useContext


import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemedComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div
      style={{
        background: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff',
        padding: '20px',
        textAlign: 'center',
      }}
    >
      <h1>The current theme is {theme}</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default ThemedComponent;

This uses useContext(ThemeContext) to access the current theme and toggle function.

3. Wrap your app with the ThemeProvider


import React from 'react';
import { ThemeSetter } from './ThemeContext';
import ThemedComponent from './ThemedComponent';

function App() {
  return (
    <ThemeSetter>
      <ThemedComponent />
    </ThemeSetter>
  );
}

export default App;

Explanation:

createContext(): Creates a context object.
useContext(): Accesses the value from the nearest Provider.
Provider: Supplies the context to child components.

useReducer Hook

When the state logic is complex, useReducer is often more suitable than useState. It uses a reducer function and dispatches actions to modify the state.


const [state, dispatch] = useReducer(reducer, initialState);

state: Current state.
dispatch: Function to dispatch actions.

Example:


import React, { useReducer } from 'react';

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

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default Counter;

useRef Hook

The useRef hook is used to hold mutable values that don’t trigger re-renders. It can also reference DOM elements.


const ref = useRef(initialValue);

Example:


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

function FocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
}

export default FocusInput;

useMemo Hook

Use useMemo to optimize performance by memoizing expensive computations.


const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Example:


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

function ExpensiveCalculation({ num }) {
  const expensiveResult = useMemo(() => {
    console.log('Expensive calculation');
    return num * 2;
  }, [num]);

  return <div>Result: {expensiveResult}</div>;
}

function App() {
  const [num, setNum] = useState(1);
  return (
    <div>
      <ExpensiveCalculation num={num} />
      <button onClick={() => setNum(num + 1)}>Increment</button>
    </div>
  );
}

export default App;

useDebugValue Hook

useDebugValue helps show internal values of custom hooks in React DevTools.

Example:


import { useState, useDebugValue } from 'react';

function useCustomHook(value) {
  const [state, setState] = useState(value);

  useDebugValue(state > 5 ? 'High' : 'Low');

  return state;
}

function App() {
  const state = useCustomHook(6);
  return <div>{state}</div>;
}

export default App;

Conclusion

React hooks provide a robust method for handling state, side effects, and additional functionalities within functional components. Here’s a quick summary of the hooks discussed:

useContext: Access shared state from context.
useReducer: Manage complex state logic using actions.
useRef: Reference DOM nodes or store mutable data.
useMemo: Avoid unnecessary recalculations.
useDebugValue: Debug custom hook values in DevTools.

By mastering these hooks, developers can write more flexible, reusable, and performance-optimized React code with ease.

Request more information

React Hook