A Deep Dive into Advanced React Hooks: Unlocking the Power of useRef, useMemo, useCallback, useTransition, and useDeferredValue

As a FullStack developer, I’ve always been fascinated by the elegance and efficiency that react hooks bring to our code. While the basic hooks like useState and useEffect are indispensable, diving into advanced hooks can truly elevate our applications' performance and user experience. Today, I want to share insights and practical examples of five advanced React hooks: useRef, useMemo, useCallback, useTransition, and useDeferredValue.

Whether you’re optimizing performance, managing state more effectively, or enhancing user interactions, these hooks are powerful tools in your React toolkit.

Understanding useRef

The useRef hook serves two primary purposes:

1. Accessing DOM elements directly.
2. Storing mutable values that persist across renders without causing re-renders when updated.

1. Accessing DOM Elements

Sometimes, we need direct access to a DOM element to manipulate it — for example, focusing an input field.

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);
  const focusTextInput = () => {
    inputRef.current.focus();
  };
  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={focusTextInput}>Focus Input</button>
    </>
  );
}

Why use useRef here?

• We assign inputRef to the ref attribute of the <input> element.
• Calling inputRef.current.focus() allows us to programmatically focus the input field.

2. Storing Mutable Values Between Renders

useRef is perfect for storing a mutable value that doesn't trigger a re-render when updated.

import React, { useRef, useState } from 'react';
function Timer() {
  const timerIdRef = useRef(null);
  const [count, setCount] = useState(0);
  const startTimer = () => {
    timerIdRef.current = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);
  };
  const stopTimer = () => {
    clearInterval(timerIdRef.current);
  };
  return (
    <>
      <p>{count}</p>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </>
  );
}

Key Takeaways:

• We use timerIdRef.current to store the timer ID.
• This allows us to start and stop the timer without re-rendering the component.

3. Preserving Values Without Re-rendering

Suppose we want to keep track of previous state values without causing re-renders.

function PreviousStateExample({ count }) {
  const prevCountRef = useRef();
  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);
  const prevCount = prevCountRef.current;
  return (
    <div>
      <p>Current count: {count}</p>
      <p>Previous count: {prevCount}</p>
    </div>
  );
}

What’s happening here?

• prevCountRef.current stores the previous count value.
• We can display both current and previous counts without additional state variables.

Mastering useMemo

useMemo is a hook that memoizes the result of a function. It recomputes the memoized value only when its dependencies change, optimizing expensive calculations.

1. Optimizing Expensive Calculations

Imagine we have a costly computation like calculating Fibonacci numbers.

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

function FibonacciCalculator() {
  const [num, setNum] = useState(1);
  const fibonacci = useMemo(() => {
    function fib(n) {
      return n <= 1 ? n : fib(n - 1) + fib(n - 2);
    }
    return fib(num);
  }, [num]);
  return (
    <>
      <input
        type="number"
        value={num}
        onChange={(e) => setNum(parseInt(e.target.value))}
      />
      <p>Fibonacci of {num} is {fibonacci}</p>
    </>
  );
}

Why use useMemo here?

• To prevent recalculating the Fibonacci number on every render.
• It only recalculates when num changes, enhancing performance.

2. Maintaining Referential Equality

When passing objects or arrays to child components, referential equality matters.

function ParentComponent() {
  const [count, setCount] = useState(0);
  const memoizedValue = useMemo(() => ({ count }), [count]);
  return (
    <>
      <ChildComponent data={memoizedValue} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}
function ChildComponent({ data }) {
  useEffect(() => {
    console.log('ChildComponent re-rendered');
  }, [data]);
  return <div>Count: {data.count}</div>;
}

Explanation:

• Without useMemo, the data object would be recreated on every render, causing ChildComponent to re-render unnecessarily.
• useMemo ensures memoizedValue only changes when count changes.

3. Filtering Large Lists Efficiently

function FilteredList({ items, filterText }) {
  const filteredItems = useMemo(() => {
    return items.filter((item) =>
      item.toLowerCase().includes(filterText.toLowerCase())
    );
  }, [items, filterText]);
  return (
    <ul>
      {filteredItems.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

Benefits:

• The filtering operation is expensive for large lists.
• useMemo prevents unnecessary recalculations when dependencies haven't changed.

Leveraging useCallback

useCallback returns a memoized version of a callback function, which is useful when passing callbacks to optimized child components that rely on referential equality to prevent unnecessary renders.

1. Avoiding Unnecessary Re-renders

function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);
  return (
    <>
      <Child onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}
const Child = React.memo(({ onClick }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>Click Me</button>;
});

Why use useCallback?

• Without it, handleClick would be recreated on every render, causing Child to re-render.
• React.memo optimizes Child, and useCallback ensures handleClick maintains referential equality.

2. Optimizing Event Handlers

function SearchInput() {
  const [query, setQuery] = useState('');
  const handleChange = useCallback((e) => {
    setQuery(e.target.value);
  }, []);
  return <input type="text" value={query} onChange={handleChange} />;
}

Benefit:

• Especially useful if handleChange is passed to child components.
• Prevents unnecessary re-renders due to function re-creation.

Exploring useTransition

With useTransition, we can mark state updates as non-urgent. This hook is invaluable for improving the user experience in situations where state updates might cause noticeable delays or janky UI.

1. Enhancing Input Responsiveness

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

function TypeAheadSearch({ data }) {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
  const [filteredData, setFilteredData] = useState([]);
  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value);
    startTransition(() => {
      const result = data.filter((item) =>
        item.toLowerCase().includes(value.toLowerCase())
      );
      setFilteredData(result);
    });
  };
  return (
    <>
      <input type="text" value={query} onChange={handleChange} />
      {isPending ? <p>Loading...</p> : <List items={filteredData} />}
    </>
  );
}

What’s happening?

• The input remains responsive because the heavy filtering is deferred.
• isPending lets us show a loading state while the non-urgent update completes.

2. Prioritizing User Interactions

function ChatApp({ messages }) {
  const [input, setInput] = useState('');
  const [displayMessages, setDisplayMessages] = useState(messages);
  const [isPending, startTransition] = useTransition();

  const handleSend = () => {
    const newMessage = { text: input, id: Date.now() };
    setInput('');
    startTransition(() => {
      setDisplayMessages((prev) => [...prev, newMessage]);
    });
  };
  return (
    <>
      <MessageList messages={displayMessages} />
      {isPending && <p>Sending message...</p>}
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={handleSend}>Send</button>
    </>
  );
}

Key Points:

• User input is prioritized over updating the message list.
• The app feels more responsive, enhancing user experience.

Utilizing useDeferredValue

useDeferredValue lets you defer a value and update it after the render is completed, preventing expensive computations from blocking the UI.

1. Deferring Value Computation in Searches

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

function SearchComponent({ data }) {
  const [input, setInput] = useState('');
  const deferredInput = useDeferredValue(input);
  const filteredData = data.filter((item) =>
    item.includes(deferredInput)
  );
  return (
    <>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <List items={filteredData} />
    </>
  );
}

Why use useDeferredValue?

• The filtering operation doesn’t block the rendering of the input.
• The UI remains responsive even with intensive computations.

2. Improving Autocomplete Performance

function Autocomplete({ suggestions }) {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);

  const matches = suggestions.filter((item) =>
    item.startsWith(deferredQuery)
  );
  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <SuggestionsList items={matches} />
    </>
  );
}

Benefits:

• Users can type smoothly without lag.
• Autocomplete suggestions update slightly later, which is often acceptable.

Conclusion

Advanced React hooks like useRef, useMemo, useCallback, useTransition, and useDeferredValue are game-changers when it comes to optimizing performance and enhancing user experience in React applications. By understanding their use cases and nuances, we can write more efficient, responsive, and maintainable code.

Key Takeaways:

• useRef: Perfect for accessing DOM elements and storing mutable values without causing re-renders.
• useMemo: Ideal for memoizing expensive computations and ensuring referential equality.
• useCallback: Useful for memoizing callback functions to prevent unnecessary re-renders.
• useTransition: Allows us to mark state updates as non-urgent, keeping the UI responsive.
• useDeferredValue: Defers updating a value to prevent expensive computations from blocking the UI.

By integrating these hooks thoughtfully, we can significantly improve our React applications’ performance and provide a smoother user experience.

Thank you for reading! If you found this article helpful, feel free to share it with your fellow developers or leave a comment below. Let’s continue learning and growing together in our React journeys.