React Concepts: Hook Proximity

Chris Schneider — Mon, 03 Jun 2024 13:53:26 +0000

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

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

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

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.

Quick React GraphQL Tips

Chris Schneider — Thu, 30 Jul 2020 18:19:15 +0000

These are some patterns I've found helpful for using GraphQL in a pragmatic fashion to reduce headaches when building applications. These examples will be overly simple, and lean toward being more expressive.

One query !== better

Prop drilling and squeezing all your data into a single query can lead to poor abstraction and unnecessary component coupling. Think about only what is necessary to make a particular component render in isolation.

Before:

function Comments({ value = [] }) {
  return value.map(({ body, author }) => (
    <p>
      {author.name}: {body}
    </p>
  ));
}

function Article() {
  // Here I'm querying for both the article AND it's comments.
  // This means they will load in and render at the same time.
  const { data, loading } = useQuery(ARTICLE);
  const { title, body, comments, author } = data;

  return loading ? 'Loading article and comments...' : (
    <div>
      <h1>
        "{title}" by: {author.name}
      </h1>
      <p>{body}</p>

      <h4>Comments:</h4>
      <Comments value={comments} />
    </div>
  );
}

After:

function Comments({ value }) {
  const { data, loading } = useQuery(COMMENTS, { variables: { id: value }});

  return loading 
    ? 'Loading comments...' 
    : data.comments.map(({ body, author }) => (
        <p>
          {author.name}: {body}
        </p>
      ));
}

function Article() {
  // Independent loading of article data and comment data.
  // Allows the separate queries to load/render at their own pace.
  const { data, loading } = useQuery(ARTICLE, { variables: { id: 123 } });
  const { id, title, body, author } = data;

  return (
    <div>
      {loading ? 'Loading article...' : (
        <Fragment>
          <h1>
            "{title}" by: {author.name}
          </h1>
          <p>{body}</p>
        </Fragment>
      )}

      <h4>Comments:</h4>
      <Comments value={id} />
    </div>
  );
}

Bind mutations directly to "action" components

Co-locating your mutation methods with any buttons/elements that trigger them enables good control inversion. Parent components will pass contextual information and child components handle execution.