How to handle default props?

[rssfrncs]

Would be great to have a section detailing the different approaches to handling default props.

[swyxio]

yeah I get mixed messages from the community on this. I like to assign when destructuring, but others like to use defaultProps. want to put in a PR?

[ghost]

Putting this as a comment but willing to propose a PR if @rssfrncs is not taking this.

interface IMyComponentProps {
  firstProp: string;
  secondProp: IPerson[];
}

export class MyComponent extends React.Component<IMyComponentProps, {}> {
  static defaultProps: Partial<IMyComponentProps> = {
    firstProp: "default",
  };
}

[tsiq-swyx]

I dont use defaultProps myself but just wanted to add that the Spectrum community also suggested adding a withDefaultProps type HOC: https://twitter.com/code_punkt/status/1000105182565490688

also, here is a slightly longer approach also using Omit: https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935

Yours seem much simpler!

would love a PR here, this is the top requested info based on feedback from reddit/hn/twitter/spectrum

[rssfrncs]

@Attrash-Islam go ahead with a PR buddy!

[ghost]

@rssfrncs Thanks! I will do it tomorrow after reviewing the whole repository so it match the README with the other section in the same format 😉

[rssfrncs]

Have you checked out this similar repo? It has an interesting approach to default props. Whilst it is focused on Redux React apps there is a lot of overlap.

[ghost]

The way they do it is not that good since you need to update your DefaultProps interface every time you want to include additional prop (see how initialCount: number is duplicated).

My suggestion is using Partial type feature which gives you to extends the defaultProps whenever you want without any additional type extensions