9 replies

About Theo's take of not destructuring props

I can't remember in what video exactly, but I heard Theo saying something about using component props without destructuring them. I gave it a go but stumbled on some scenarios where I'm really scratching my head to know how to do properly without destructuring.

Basically it's a matter of default values and prop forwarding

1. Default Values

export const NewComponent: React.FC<{ testColor: string } & React.ComponentPropsWithoutRef<"input">> = (props) => {
  return (
    <label>
      <p style={{ background: props.testColor }}>Label</p>
      <input {...props} />
    </label>
  );
};

export const NewComponent: React.FC<{ testColor: string } & React.ComponentPropsWithoutRef<"input">> = (props) => {
  return (
    <label>
      <p style={{ background: props.testColor }}>Label</p>
      <input {...props} />
    </label>
  );
};

I know only of "defaultProps", but not only it is deprecated, but also adds another layer of indirection by having to read the code below at another place

NewComponent.defaultProps = {
  testColor: "red"
}

NewComponent.defaultProps = {
  testColor: "red"
}

2. Prop Forwarding

In the example I gave before, there is a problem: even though I only want to use

testColor

testColor

in the

element, when I use

...props

...props

in the

input

input

element, I'm passing

testColor

testColor

as well, which throws a warning.

How it would be with destructured props

export const NewComponent: React.FC<{ testColor: string } & React.ComponentPropsWithoutRef<"input">> = ({
  testColor = "red",
  ...rest
}) => {
  return (
    <label>
      <p style={{ background: testColor }}>Label</p>
      <input {...rest} />
    </label>
  );
};

export const NewComponent: React.FC<{ testColor: string } & React.ComponentPropsWithoutRef<"input">> = ({
  testColor = "red",
  ...rest
}) => {
  return (
    <label>
      <p style={{ background: testColor }}>Label</p>
      <input {...rest} />
    </label>
  );
};

Also, the React documentation itself only states destructuring as the way to pass default values to components:
https://react.dev/learn/passing-props-to-a-component#specifying-a-default-value-for-a-prop

Passing Props to a Component – React

The library for web and native user interfaces

TTC

Theo's Typesafe Cult•2y ago•

9 replies

Paulo Martins

About Theo's take of not destructuring props

1. Default Values

export const NewComponent: React.FC<{ testColor: string } & React.ComponentPropsWithoutRef<"input">> = (props) => {
  return (
    <label>
      <p style={{ background: props.testColor }}>Label</p>
      <input {...props} />
    </label>
  );
};

export const NewComponent: React.FC<{ testColor: string } & React.ComponentPropsWithoutRef<"input">> = (props) => {
  return (
    <label>
      <p style={{ background: props.testColor }}>Label</p>
      <input {...props} />
    </label>
  );
};

I know only of "defaultProps", but not only it is deprecated, but also adds another layer of indirection by having to read the code below at another place

NewComponent.defaultProps = {
  testColor: "red"
}

NewComponent.defaultProps = {
  testColor: "red"
}

2. Prop Forwarding

In the example I gave before, there is a problem: even though I only want to use

testColor

testColor

in the

element, when I use

...props

...props

in the

input

input

element, I'm passing

testColor

testColor

as well, which throws a warning.

How it would be with destructured props

export const NewComponent: React.FC<{ testColor: string } & React.ComponentPropsWithoutRef<"input">> = ({
  testColor = "red",
  ...rest
}) => {
  return (
    <label>
      <p style={{ background: testColor }}>Label</p>
      <input {...rest} />
    </label>
  );
};

export const NewComponent: React.FC<{ testColor: string } & React.ComponentPropsWithoutRef<"input">> = ({
  testColor = "red",
  ...rest
}) => {
  return (
    <label>
      <p style={{ background: testColor }}>Label</p>
      <input {...rest} />
    </label>
  );
};

Passing Props to a Component – React

The library for web and native user interfaces

About Theo's take of not destructuring props

1. Default Values

2. Prop Forwarding

How it would be with destructured props

About Theo's take of not destructuring props

1. Default Values

2. Prop Forwarding

How it would be with destructured props

Similar Threads

Similar Threads

Similar Threads