Eduardo Grajeda Blandón

Eduardo Grajeda Blandón

Software Engineer at Criteo

Last updated on September 21, 2019

TypeScript with React: Components

The way I'm currently declaring components when working with TypeScript and React.


To define a React.FunctionComponent<> connected to Redux using hooks:

interface IProps {
  title: string;
}

export const MyComponent: React.FunctionComponent<IProps> = ({
  title
}) => {
  const [content, setContent] = useState(null);
  const comments = useSelector((state: TAppState) => state.comments);
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch(doSomething())}>Save</button>
  );
};

To define a React.Component<> connected to Redux with properties and state:

Conventions

  • Methods that are meant to handle events should:
    • Start with on (e.g. onSaveButtonClick).
    • Be bound in the constructor to this, to avoid the arrow functions inside render().