Day 12: Advanced React Hooks

Introduction
Welcome back to Day 12 of our 30-day blog series on React.js! Today, we'll delve into more advanced concepts and Hooks in React, including useContext, useMemo, and useCallback. These Hooks provide additional functionality and optimization techniques for building React applications.

useContext Hook
The useContext Hook allows functional components to consume context without nesting or prop drilling. It provides a more elegant solution for accessing context values within components.

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return <button style={{ background: theme }}>Themed Button</button>;
}

In the above example:

• We create a ThemeContext using React.createContext.
• The ThemedButton component uses the useContext Hook to access the current theme value provided by the ThemeContext.

useMemo Hook
The useMemo Hook allows for memoization of expensive calculations, preventing unnecessary re-computation of values on every render. It memoizes the result of a function and returns the cached value when the dependencies haven't changed.

import React, { useMemo } from 'react';

function ExpensiveComponent({ value }) {
  const expensiveValue = useMemo(() => {
    // Perform expensive calculation here
    return value * 2;
  }, [value]); // Recompute only if 'value' changes

  return <div>Expensive Value: {expensiveValue}</div>;
}

In the above example:

• We use the useMemo Hook to memoize the result of an expensive calculation based on the value prop.
• The expensive calculation is re-computed only when the value prop changes.

useCallback Hook
The useCallback Hook is similar to useMemo, but it memoizes callback functions instead of values. It's useful for preventing unnecessary re-renders of components that rely on callback props.

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

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In the above example:

• We use the useCallback Hook to memoize the increment function.
• The increment function is re-created only when the component mounts.

Advanced React Hooks such as useContext, useMemo, and useCallback provide additional functionality and optimization techniques for building React applications. These Hooks enable components to consume context, memoize expensive calculations, and optimize callback functions, resulting in better performance and cleaner code.

Stay tuned for tomorrow's post, where we'll explore more React features and patterns, including error boundaries, code splitting, and higher-order components.