2

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?

Vencovsky
  • 28,550
  • 17
  • 109
  • 176
A.Vincent
  • 257
  • 3
  • 13
  • 3
    None of those are hooks. These are just functional components. The first example additionally tells the compiler that the function is actually a functional component rather than a usual function. Except from this they are pretty much the same. – trixn Sep 24 '19 at 14:36
  • i thinks those are same. – syjsdev Sep 24 '19 at 14:38
  • @trixn edited the question so it's more clear. – Vencovsky Sep 24 '19 at 14:46
  • 1
    You may refer to this too! There are some answers to your question on the answers and comments on this post https://stackoverflow.com/questions/57931632/whats-the-proper-way-of-giving-react-stateless-functional-component-a-typescrip/57932224#57932224 – wentjun Sep 24 '19 at 14:54
  • I use hook in the fonction i juste want understand the différence between 2 way in exemple. – A.Vincent Sep 24 '19 at 19:13

1 Answers1

3

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.

trixn
  • 15,761
  • 2
  • 38
  • 55