0

Example parent:

// parent.js
return <Child complexValue={{a: 1, b:2}} simpleValue={12}/>

My child is starting to use props.complexValue and props.simpleValue 30+ times in 30+ functions. I'm wondering what are the best practices so that if either of them change down the road, I don't have to re-update / change logic to work in so many places. It's also nice to not see so much props.* spread out everywhere in my child code.

What's the best practice to handle this situation? I'm considering Option 1 and 2 vs Option 3, but don't understand React very well so would appreciate any tips / pointers / gotchas / resource links I can read up on. Wasn't sure what this kind of concept was called in React.

Option 1 - Declare function to return props value

// child.js
const Child = (props) => {
  const getComplexValue = () => {
    return props.complexValue
  }

  const getSimpleValue = () => {
    return props.simpleValue
  }
   
  const fnA = () => {
    const simpleValue = getSimpleValue()
    if (simpleValue == 12) {
      return true
    }
  }
  const fnB = () => {
    const complexValue = getComplexValue()
    if (complexValue == 12) {
      return true
    }
  }
  // lots more similar functions declarations
  ...
}

Option 2 - Declare variable pointing to props value

// child.js
const Child = (props) => {
  const complexValue = props.complexValue
  const simpleValue = props.simpleValue
   
  const fnA = () => {
    if (simpleValue == 12) {
      return true
    }
  }
  const fnB = () => {
    if (complexValue == 12) {
      return true
    }
  }
  // lots more similar functions declarations
  ...

Option 3 - Directly use props everywhere

// child.js
const Child = (props) => {   
  const fnA = () => {
    if (props.simpleValue == 12) {
      return true
    }
  }
  const fnB = () => {
    if (props.complexValue == 12) {
      return true
    }
  }
  // lots more similar functions declarations
  ...
AncientArtOfDesign
  • 45
  • 5
  • 2
    I would just use unpacking, `const Child = ({ simpleValue, complexValue }) => { ... }`. This is most similar to option 2, which can be simplified to `const { simpleValue, complexValue } = props`. Option 3 is fine, and option 1 is not good. – iz_ Aug 04 '21 at 21:30
  • I'm a little confused by, "I'm wondering what are the best practices so that if either of them change down the road, I don't have to re-update / change logic to work in so many places." There is no way to pass props to a child component in such a way that if you change those props (i.e. you change their name or their shape or their behavior) you won't have to change each instance that the child component consumes those props. Am I misunderstanding what you're asking? – Brendan Bond Aug 04 '21 at 21:38
  • 1
    But *very* broadly speaking, React encourages you (and indeed incentives you) to *not* have a component with 30+ functions consuming props - you should try to atomize components and behaviors as much as possible to avoid just this type of problem – Brendan Bond Aug 04 '21 at 21:40
  • [Destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#unpacking_fields_from_objects_passed_as_a_function_parameter) is the clearest way in my opinion, and it let's you [easily pass through part of the props down to a child component](https://stackoverflow.com/a/59587121/1218980) if needed. – Emile Bergeron Aug 04 '21 at 21:49

0 Answers0