0

What are the considerations behind deciding between passing the out of the box setWhatever from useState() down to a child (see case one below) versus creating a custom handleWhatever function to pass to the child, where the handleWhatever function uses setWhatever within it (see case two below)?

Definitely React is about passing state down from parent to child. But after reiterating that fact, it seems like we are always left with countless examples where a function is passed from parent to child for the purpose of keeping a parent aware of a certain value within the child. My question is about such cases where a function needs to be passed down to a child. (If all such cases are misguided and functions being passed down for the sake of updating a parent is an anti-pattern then it would be useful to know what to do instead-- global variable?).

Case #1

// Test.js (parent, case one)
import React, { useState } from 'react';
import DetermineValue from './DetermineValue';
const Test = () => {
  const [importantValue, setImportantValue] = useState();
  console.log(importantValue);
  return <DetermineValue setImportantValue={setImportantValue} />;
};
export default Test;

// DetermineValue.js (child, case one)
import React from 'react';
const DetermineValue = ({ setImportantValue }) => {
  return (
    <>
      ...
      onClick={() => {
                setImportantValue('Important Data');
              }}
      ...
    </>
  );
};
export default DetermineValue;

Case #2

// Test.js (parent, case two)
import React, { useState } from 'react';
import DetermineValue from './DetermineValue';
const Test = () => {
  const [importantValue, setImportantValue] = useState();
  const handleSetImportantValue = (importantValueQuickPass) => {
    setImportantValue(importantValueQuickPass);
  };
  console.log(importantValue);
  return <DetermineValue handleSetImportantValue={handleSetImportantValue} />;
};
export default Test;

// DetermineValue.js (child, case two)
import React from 'react';
const DetermineValue = ({ handleSetImportantValue }) => {
  return (
    <>
      ...
      onClick={() => {
                handleSetImportantValue('Important Data');
              }}
      ...
    </>
  );
};
export default DetermineValue;
2
  • Passing your setImportantValue function down to a child component is perfectly valid, however, what's bothering me in your code samples is that you seem to call this function during rendering instead of when an action occurs (i.e. button pressed, form submitted etc). P.S. your code sample #2 is merely a wrapper around setImportantValue - unless there is more logic, I would never do it this way
    – nbokmans
    Commented Jan 19, 2021 at 12:59
  • @nbokmans Thanks for the good point about the scenario not making sense if the data was known a priori, I was being overly terse... I edited the code so it is more realistic. About the other thing: I have something in the back of my mind saying that calling handleSetImportantValue from the parent function really does make "things" different from having only the bare "set" function to work with. Thanks for the quick response! :)
    – tarstevs
    Commented Jan 19, 2021 at 13:16

1 Answer 1

1

Passing setState to a child component is the way I'd go if there's no other logic included. But this warning is not about child component calling the setState passed from parent. It's about calling it during render phase. But your code in the edited version of the question shouldn't give this error. Please refer to the docs about the warning.

1
  • 1
    Yup, good point. Now that the example is more realistic and the error is not applicable, I think mentioning the error is just going to cause confusion... so I removed the part that no longer applies. Thanks!
    – tarstevs
    Commented Jan 19, 2021 at 15:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.