DEV Community

Cover image for React Concepts: Hook Proximity
Chris Schneider
Chris Schneider

Posted on

React Concepts: Hook Proximity

Why Hook Proximity?

Prop drilling occurs when you pass data through many layers of components. This leads to complex and difficult-to-maintain code. By maintaining hook proximity, you can localize any side effects, and reduce the need to pass props through the component tree.

As a practical example, we'll create a simple application where two child components need to fetch data from different endpoints. We'll define a simple useFetch abstraction and demonstrate the different patterns.

const useFetch = (url) => {
  const [data, setData] = useState(null);

  async function fetchData() {
    const response = await fetch(url);
    const data = await response.json();
    setData(data);
  }

  return [data, fetchData];
};
Enter fullscreen mode Exit fullscreen mode

Without Hook Proximity

import React, { useState, useEffect } from 'react';
import { useFetch } from './fetch';

export function ParentComponent() {
  const [data1, fetchData1] = useFetch('https://api.example.com/data1');
  const [data2, fetchData2] = useFetch('https://api.example.com/data2');

  return (
    <>
      <ChildComponent1 data={data1} fetchData={fetchData1} />
      <ChildComponent2 data={data2} fetchData={fetchData2} />
    </>
  );
};

function ChildComponent1({ data, fetchData }) {
  return (
    <div>
      <button onClick={fetchData}>Fetch Data 1</button>
      {data && <div>{JSON.stringify(data)}</div>}
    </div>
  );
}

function ChildComponent2({ data, fetchData }) {
  return (
    <div>
      <button onClick={fetchData}>Fetch Data 2</button>
      {data && <div>{JSON.stringify(data)}</div>}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

With Hook Proximity

import React, { useState, useEffect } from 'react';
import { useFetch } from './fetch';

export function ParentComponent() {
  return (
    <>
      <ChildComponent1 />
      <ChildComponent2 />
    </>
  );
};

function ChildComponent1() {
  const [data, fetchData] = useFetch('https://api.example.com/data1');

  return (
    <div>
      <button onClick={fetchData}>Fetch Data 1</button>
      {data && <div>{JSON.stringify(data)}</div>}
    </div>
  );
};

function ChildComponent2() {
  const [data, fetchData] = useFetch('https://api.example.com/data2');

  return (
    <div>
      <button onClick={fetchData}>Fetch Data 2</button>
      {data && <div>{JSON.stringify(data)}</div>}
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

Explanation

In the first example, the ParentComponent manages the data fetching for both ChildComponent1 and ChildComponent2, and the child components rely on props to trigger the data fetch and receive the data. This approach requires prop drilling, making the code harder to manage as the number of components grows.

In the second example, we use hook proximity by moving the useFetch hook directly into the child components. This eliminates the need for prop drilling, simplifies the component hierarchy, and makes the side effects more localized and easier to reason about.

Conclusion

Avoiding prop drilling by using hook proximity helps create more maintainable and understandable React components. By keeping state and side effects close to where they are needed, you can reduce complexity and improve the clarity of your code.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay