React Hooks

React Hooks, introduced in React 16.8, enable functional components to use state, lifecycle, and other React features without relying on class components.

• Eliminate the need for class components for state and side-effect management.
• Improve code readability and encourage a functional programming style.
• Widely adopted in modern React projects for cleaner and more maintainable code.

Types of React Hooks

React provides a range of hooks that enable functional components to manage state, side effects, and other core behaviors. Some of the most commonly used React hooks include:

1. State Hooks

State hooks like useState and useReducer enable functional components to manage state in a clean, efficient, and modular way.

useState: The useState hook is used to declare state variables in functional components. It allows us to read and update the state within the component.

• useState is used to declare state variables in functional components.
• The state variable (count) and the updater function (setCount) allow you to read and update the state.

Output:

Syntax:

const [state, setState] = useState(initialState);

• state: The current value of the state.
• setState: A function used to update the state.
• initialState: The initial value of the state, which can be a primitive type or an object/array

useReducer: The useReducer hook is a more advanced state management hook used for handling more complex state logic, often involving multiple sub-values or more intricate state transitions.

Output:

Syntax:

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

• state: The current state value.
• dispatch: A function used to dispatch actions that will update the state.
• reducer: A function that defines how the state should change based on the dispatched action.
• initialState: The initial state value.

2. Context Hooks

The useContext hook allows functional components to directly access values from the React Context API without prop drilling.

• Simplifies data sharing across the component tree.
• Eliminates the need to pass props manually through multiple levels.
• Makes context consumption cleaner and more readable.

• useContext allows you to consume context values, making it easier to share data across components without prop drilling.
• The Provider makes the context value accessible to all components below it in the component tree.

Output:

Syntax:

const contextValue = useContext(MyContext);

• The useContext hook takes a context object (MyContext) as an argument and returns the current value of that context.
• The contextValue will hold the value provided by the nearest <MyContext.Provider> in the component tree.

3. Effect Hooks

Effect hooks allow functional components to manage side effects in a structured and efficient manner.

• useEffect handles common side effects like data fetching and subscriptions.
• useLayoutEffect runs synchronously after DOM updates.
• useInsertionEffect manages style injections before DOM mutations.

useEffect: The useEffect hook allows functional components to handle side effects and replaces lifecycle methods like componentDidMount and componentDidUpdate.

• Updates the document title and logs changes when count updates.
• Cleanup resets the title and clears the previous effect before re-running.

Output:

Syntax:

useEffect(() => {
 // Side effect logic here
}, [dependencies]);

• useEffect(() => { ... }, [dependencies]); runs side effects after rendering.
• The effect runs based on changes in the specified dependencies.

useLayoutEffect: useLayoutEffect is used to measure or modify the layout before the browser paints the screen, ensuring smooth visual updates without flickering.

Syntax:

useLayoutEffect(() => {
 // Logic to manipulate layout or measure DOM elements
}, [dependencies]);

useInsertionEffect: The useInsertionEffect is designed for injecting styles early, especially useful for server-side rendering (SSR) or styling libraries, ensuring styles are in place before the component is rendered visually.

Syntax:

useInsertionEffect(() => {
 // Logic to inject styles or manipulate stylesheets
}, [dependencies]);

4. Performance Hook

Performance Hooks in React, like useMemo and useCallback, are used to optimize performance by avoiding unnecessary re-renders or recalculations.

useMemo: useMemo is a React hook that caches the result of an expensive calculation and recomputes it only when its dependencies change, improving performance by avoiding unnecessary recalculations.

Syntax:

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

• Computes and stores the result of computeExpensiveValue(a, b).
• Recalculates the value only when a or b changes.

• useMemo memoizes the result of expensiveCalculation.
• It only recomputes when count changes.
• When text changes, the calculation is not re-run, optimizing performance.
• console.log appears only when count changes, showing memoization works.

Output:

useCallback: useCallback is a React hook that memoizes functions so they are recreated only when their dependencies change, helping prevent unnecessary re-renders when functions are passed to child components.

Syntax:

const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

• useMemo caches the computed value (num * 2), recalculating it only when num changes.
• This prevents unnecessary calculations on every render.

5. Resource Hooks(useRef)

useRef is a React hook used to store mutable values or access DOM elements without triggering re-renders.

• Persists values across renders without affecting the UI.
• Commonly used for DOM references and mutable variables.

• countRef holds the mutable count value.
• useState (forceRender) triggers re-renders to reflect changes in the UI.
• When the Increment button is clicked, countRef is updated.
• setForceRender forces a re-render to update the UI.
• The updated count is displayed in an <h1> tag, not in a prompt.

Output:

Syntax:

const refContainer = useRef(initialValue);

6. Custom Hooks

Custom Hooks are user-defined functions that encapsulate reusable logic. They enhance code reusability and readability by sharing behavior between components.

Using a Custom Hook

• The custom hook useWidth encapsulates the logic for tracking the window's width.
• It reduces redundancy by reusing the logic across components.

7. Other Hooks

React offers additional hooks for specific use cases

• useImperativeHandle: useImperativeHandle customizes the instance value exposed by useRef.
• useDebugValue: Displays custom labels for hooks in ReactDevTools.

Difference Between Hooks and Class Components