CODEWITHSUNDEEP
javascriptreactjs
Jorche
Jorche

Reputation: 187

React, should a hook result be passed down from parent to child component?

Very often when using a hook on a parent component one of its children will also need to use it. Is it better (performance / readability wise) to pass a function that we get from a hook down to a child component or to get it from scratch?

Here's a demo of what I mean:

import { useTranslation } from "react-i18next";

// Parent component
export default function App() {
  const { t: formatMessage } = useTranslation();

  return (
    <div className="App">
      <p>{formatMessage("Welcome to React")}</p>
      <MyButton1 text="Click me!" formatMessage={formatMessage} />
      <MyButton2 text="Click me!" />
    </div>
  );
}

// Option 1: pass formatMessage as a prop
const MyButton1 = ({ text, formatMessage }) => {
  return <button>{formatMessage(text)}</button>;
};

// Option 2: create a new instance of useTranslation
const MyButton2 = ({ text }) => {
  const { t: formatMessage } = useTranslation();

  return <button>{formatMessage(text)}</button>;
};

Both components work, but <MyButton1 /> gets the formatMessage function directly from his parent, and <MyButton2 /> creates a new instance. I've seen code bases that use both options. Which one do you think is the best one?

Upvotes: 2

Views: 1660

Answers (1)

Youssouf Oumar
Youssouf Oumar

Reputation: 45835

First case:

If a Child component is a direct child of a Parent component that has called the hook, and Child will always receive the needed prop everywhere it is used, I think it is better to use the first option, as it will result to fewer function calls. It depends on what the hook does, but it may save some CPU usage.

Second case:

If Child is deep nested, the second option may make sense as otherwise, it will result in what is known as Prop Drilling. Also, if you want Child to be completely independent of its parent, you would wanna go with the second option.

Upvotes: 2

Related Questions