React Hooks

React hooks allow you to use state and other React features in functional components. Here's a brief overview of each core hook:

useState

• Purpose: Manages state in functional components.

• Usage: [state, setState] = useState(initialValue)

• Example:

  import React, { useState } from 'react';
  
  function Counter() {
    const [count, setCount] = useState(0);
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
  }

useEffect

• Purpose: Handles side effects such as data fetching or subscriptions.

• Usage: useEffect(() => { /* effect */ }, [dependencies])

• 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));
    }, []);
    return <div>{data ? data.value : 'Loading...'}</div>;
  }

useReducer

• Purpose: Manages complex state logic with actions.

• Usage: [state, dispatch] = useReducer(reducer, initialState)

• Example:

  import React, { useReducer } from 'react';
  
  const initialState = { count: 0 };
  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, initialState);
    return (
      <div>
        <p>Count: {state.count}</p>
        <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
        <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      </div>
    );
  }

useContext

• Purpose: Accesses context values without passing props manually.

• Usage: const contextValue = useContext(Context)

• Example:

  import React, { createContext, useContext, useState } from 'react';
  
  const ThemeContext = createContext('light');
  
  function ThemeDisplay() {
    const theme = useContext(ThemeContext);
    return <div>Current theme: {theme}</div>;
  }
  
  function App() {
    const [theme, setTheme] = useState('dark');
    return (
      <ThemeContext.Provider value={theme}>
        <ThemeDisplay />
        <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>Toggle Theme</button>
      </ThemeContext.Provider>
    );
  }

useMemo

• Purpose: Memoizes expensive calculations to optimize performance.

• Usage: const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

• Example:

  import React, { useMemo, useState } from 'react';
  
  function ExpensiveComponent({ a, b }) {
    const computeExpensiveValue = (a, b) => {
      // Expensive computation
      return a + b;
    };
  
    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  
    return <div>Computed Value: {memoizedValue}</div>;
  }

useCallback

• Purpose: Memoizes callback functions to prevent unnecessary re-renders.

• Usage: const memoizedCallback = useCallback(() => { /* callback */ }, [dependencies])

• Example:

  import React, { useCallback, useState } from 'react';
  
  function Button({ onClick }) {
    console.log('Button rendered');
    return <button onClick={onClick}>Click me</button>;
  }
  
  function App() {
    const [count, setCount] = useState(0);
    const handleClick = useCallback(() => setCount(c => c + 1), []);
    
    return (
      <div>
        <p>Count: {count}</p>
        <Button onClick={handleClick} />
      </div>
    );
  }

useRef

• Purpose: Accesses and interacts with DOM elements directly or stores mutable values.

• Usage: const ref = useRef(initialValue)

• Example:

  import React, { useRef } from 'react';
  
  function FocusInput() {
    const inputRef = useRef(null);
  
    const focusInput = () => {
      inputRef.current.focus();
    };
  
    return (
      <div>
        <input ref={inputRef} type="text" />
        <button onClick={focusInput}>Focus Input</button>
      </div>
    );
  }

useLayoutEffect

• Purpose: Similar to useEffect, but fires synchronously after all DOM mutations.

• Usage: useLayoutEffect(() => { /* effect */ }, [dependencies])

• Example:

  import React, { useLayoutEffect, useRef, useState } from 'react';
  
  function LayoutComponent() {
    const [height, setHeight] = useState(0);
    const divRef = useRef(null);
  
    useLayoutEffect(() => {
      setHeight(divRef.current.getBoundingClientRect().height);
    }, []);
  
    return (
      <div ref={divRef}>
        <p>Height of the div: {height}px</p>
      </div>
    );
  }

useImperativeHandle

• Purpose: Customizes the instance value that is exposed when using ref with forwardRef.

• Usage: useImperativeHandle(ref, () => ({ /* values */ }))

• Example:

  import React, { forwardRef, useImperativeHandle, useRef } from 'react';
  
  const CustomInput = forwardRef((props, ref) => {
    const inputRef = useRef(null);
  
    useImperativeHandle(ref, () => ({
      focus: () => {
        inputRef.current.focus();
      }
    }));
  
    return <input ref={inputRef} />;
  });
  
  function App() {
    const inputRef = useRef(null);
  
    return (
      <div>
        <CustomInput ref={inputRef} />
        <button onClick={() => inputRef.current.focus()}>Focus Input</button>
      </div>
    );
  }

useTransition

• Purpose: Manages transitions to keep the UI responsive during updates.

• Usage: [isPending, startTransition] = useTransition()

• Example:

  import React, { useState, useTransition } from 'react';
  
  function App() {
    const [isPending, startTransition] = useTransition();
    const [input, setInput] = useState('');
  
    const handleChange = (e) => {
      startTransition(() => {
        setInput(e.target.value);
      });
    };
  
    return (
      <div>
        <input type="text" value={input} onChange={handleChange} />
        {isPending && <p>Loading...</p>}
      </div>
    );
  }

useDeferredValue

• Purpose: Delays updating the state to keep the UI responsive.

• Usage: const deferredValue = useDeferredValue(value)

• Example:

  import React, { useState, useDeferredValue } from 'react';
  
  function ExpensiveList({ items }) {
    const deferredItems = useDeferredValue(items);
    
    return (
      <ul>
        {deferredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    );
  }
  
  function App() {
    const [items, setItems] = useState([...Array(10000).keys()]);
  
    return (
      <div>
        <ExpensiveList items={items} />
      </div>
    );
  }

---

This overview includes all the core React hooks, providing a snapshot of their purpose and usage. For more detailed documentation, refer to the React documentation.