Why "he" does not write React.FC on each function?

Issue

I learn typescript, and I dont understand why he write in the first Function React.FC and in other function he does not write "React.FC". Why?

exp:

...
const Login: React.FC<Props> = ({ signIn }) => {

 const Add = (id: number) => {
   ...
  };

 return (
  <div>
   <p>Hello</p>
  </div>
)
};

Why I dont write React.FC in Add function ?

Solution

Combining with Typescript I actually use FC only if I want to pass and extract children from props because it is the best way to type them. If we use your example:

Without children it can be like:

interface Props {
  signIn: string;
}

const Login = ({ signIn }: Props) => {

With children you can still do it the same way:

interface Props {
  signIn: string;
  children: React.Node; //or something similar, there are few options
}

const Login = ({ signIn, children }: Props) => {

or you can use FC here and skip children in your Props interface:

interface Props {
  signIn: string;
}

const Login: React.FC<Props> = ({ signIn, children }) => {

Answered By - Buszmen