--- 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 ( <> ); }; function ChildComponent1({ data, fetchData }) { return (

{data &&

{JSON.stringify(data)}

}

); } function ChildComponent2({ data, fetchData }) { return (

{data &&

{JSON.stringify(data)}

}

); } ``` ### With Hook Proximity ```jsx import React, { useState, useEffect } from 'react'; import { useFetch } from './fetch'; export function ParentComponent() { return ( <> ); }; function ChildComponent1() { const [data, fetchData] = useFetch('https://api.example.com/data1'); return (

{data &&

{JSON.stringify(data)}

}

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

{data &&

{JSON.stringify(data)}

}

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

reactconcepts

React Concepts: Hook Proximity

Join Our Newsletter. No Spam, Only the good stuff.