React Concepts: Hook Proximity
Tags: reactconcepts, react, javascript, hooks
Published: 2024-06-03 13:53:26

---
title: React Concepts: Hook Proximity
published: true
description: Keeping your component's side effects (like data fetching, subscriptions, or logging) close to where they are triggered, avoiding the pitfalls of prop drilling.
tags: reactconcepts, react, javascript, hooks
cover_image: https://domf5oio6qrcr.cloudfront.net/medialibrary/12416/65b0e235-2aa8-4138-9e1e-12463b8c6f4e.jpg
---

## Why Hook Proximity?

[Prop drilling](https://dev.to/codeofrelevancy/what-is-prop-drilling-in-react-3kol) 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.

```jsx
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];
};
```

### Without Hook Proximity

```jsx
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>
  );
}
```

### With Hook Proximity

```jsx
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>
  );
};
```

## 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.