Когда я должен использовать React.FC?

Question

[Herberito Galustyan]

У меня есть вот такой компонент

const Herberito = ( x ) => <div>{x}</div>;

Должен ли я использовать React.FC ?

Answer 1

[Антон Спирин]

Пример:

interface Props {
  someProp: string;
}

const Herberito: React.FC<Props> = ({ someProp }) => <div>{someProp}</div>;

Если вы не передаете внешние свойства или children, то тип React.FC можно не указывать.

Comments

[Herberito Galustyan]

Антон Спирин как я понимаю я должен использовать React.FC только тогда когда есть state и props ?

[Durin Qurkingo]

Антон Спирин Можешь ответить на вопрос Herberito Galustyan Мне тоже интересно

[Антон Спирин]

Herberito Galustyan, Durin Qurkingo, state в функциональных компонентах быть не может. React.FC определяет тип, который может использовать стандартное свойство children, опционально принимает интерфейс ваших свойств, а так же статические свойства displayName, propTypes, contextTypes:

const Example: React.FC = ({ children }) => {
  return <div>{children}</div>;
};

Example.propTypes = {}; // не надо использовать с TypeScript
Example.contextTypes = {}; // лучше использовать useContext
Example.displayName = 'Example (Module Name)';  // крайне редко может понадобиться

Если используете дополнительные обертки(например WithRouter) и передаете свои свойства:

interface OwnProps {
  className?: string;
}

type Props = OwnProps & RouteComponentProps;

const Example: React.FC<Props> = ({ className, children, location }) => {
  if (location.pathname === '/some_path') return <Redirect to="/some_other_path" />
  return <div className={className}>{children}</div>;
};

Если передаете свои свойства:

interface Props {
  className?: string;
}

const Example: React.FC<Props> = ({ className, children }) => {
  return <div className={className}>{children}</div>;
};

Что касается использования или не использования FC, то я бы рекомендовал такой вариант:
Создать в IDE шаблон и создавать файл с нужным для конкретного проекта бойлерплейтом.
Например для IDE Webstorm шаблон для текущего проекта у меня выглядит так:

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
  
`;

interface Props {

}

const ${NAME}: React.FC<Props> = ({}) => {

  return (
    <Wrapper>

    </Wrapper>
  );
};

export default ${NAME};

Я не знаю будут у компонента свойства или нет, но добавить их при необходимости очень удобно и быстро.

Answer 2

[Андрей Костяев]

Ну да, это же функциональный компонент)

Comments

[Herberito Galustyan]

mrdestroii вроде функциональным компонентам считается тот компонент у которого есть state

[Андрей Костяев]

Herberito Galustyan, функциональные компонентом считается если это функция, а в данном случае это функция)