Discussion on: Writing (clean) React code

[simonas88]

Wrapping props in an object is risky business. You have to understand well how that particular prop travels down the components and where it is created and how often updated. Otherwise you'll make your app do unnecessary updates and re-renders which may impact the performance significantly.

[Jithin KS]

Yeah, I think that is true. I'm not saying that you mindlessly combine every props into an object. Props that are really related to each other can be combined into an individual unit.

I can give you an example. Suppose that there is a Shapes component that renders a line and a circle.

const Shapes = (props) => {

  // Here we destructured the respective parameters child components want
  // And passing to the components

  const { lineParams } = props
  const { circleParams } = props

  // Line and circle rerender only if their respective props change

  return (
    <>
      <Line params = {lineParams}/>
      <Circle params = {circleParams}/>
    </>
  )
}

const Shapes=(props) => {

  const { combinedParams } = props

  // Here we have mindlessly combined everything into one
  // So whenever it changes both will rerender which we do not want

  // Props that are combined should be taken out
  // at appropriate levels

  return (
    <>
      <Line params={combinedParams}/>
      <Circle params={combinedParams}/>
    </>
  )
}

<Shapes
  lineParams={lineParams}
  circleParams={circleParams}
/>

I'm just saying that the above is better than the component below :

<Shapes
 lineX1={lineX1}
 lineY1={lineY1}
 lineX2={lineX2}
 lineY2={lineY2}
 circleX={circleX}
 circleY={circleY}
 circleRadius={circleRadius}
/>