CODEWITHSUNDEEP
reactjstypescript
A.Vincent
A.Vincent

Reputation: 267

What is the difference between these 2 ways to create a functional component with typescript?

I search to unsderstand the difference between this 2 functional components:

interface SquareProps {
  cote: string;
  text: string;
  bgc: string;
}

const SquareA: React.FC<SquareProps> = (props) => {...}

and

const SquareB: = (props: SquareProps) => {...}

What is the difference between using the first solution or the second?

Upvotes: 2

Views: 88

Answers (1)

trixn
trixn

Reputation: 16309

The best™ way is to use React.FC when typing functional components.

It gives typescript type hints about special properties like defaultProps and displayName and adds the correct types to props like children.

Both ways create valid functional components but the first one is more accurately typed making it less likely to be misused and provide better code completion.

Upvotes: 3

Related Questions