React code-smells: Passing unnecessary props

Component receiving many props might suggest something is wrong.

In this case MyComponent receives many props used only to calculate another values.

function MyComponent({ value, format, isVisible, color, height, width }) {
  const displayValue = useMemo(() => {
    if (!isVisible) return "";
    if (!value) return "";

    value.transform(format);
  }, [isVisible, value, format]);

  return (
    <div style={{ color, height, width }}>Some content and {displayValue}</div>
  );
}

function MyParentComponent() {
  // value, format, isVisible, color, height, width come from state or somewhere else

  return (
    <div>
      <h2>Here will be my component</h2>
      <MyComponent
        value={value}
        format={format}
        isVisible={isVisible}
        color={color}
        height={height}
        width={width}
      />
    </div>
  );
}

In such cases we could simplify the component by calculating the values in parent or additional wrapper component and pass only that.

function MyComponent({ style, displayValue }) {
  return <div style={style}>Some content and {displayValue}</div>;
}

function MyParentComponent() {
  // value, format, isVisible, color, height, width come from state or somewhere else

  const style = useMemo(
    () => ({ color, height, width }), 
    [color, height, width]
  );

  const displayValue = useMemo(() => {
    if (!isVisible) return "";
    if (!value) return "";

    value.transform(format);
  }, [isVisible, value, format]);

  return (
    <div>
      Here will be my component
      <MyComponent style={style} displayValue={displayValue} />
    </div>
  );
}

Tweet