Typing component state with typescript when using react hooks

Question

Class components in react take two interfaces namely for props and state

Class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {}

However while using hooks the component declaration looks like this

interface IMyComponentProps {
  ...
}

const MyComponent: React.FC<IMyComponentProps> = ({...}) => {
  const [state, setState] = useState(...);

  return (
    <>...</>
  );
};

export default FormMessage;

Is it necessary to specify interface for state while using hooks and how?

Morphyish · Accepted Answer · 2019-08-09 09:38:21Z

3

You can type your state, useState is a generic function

const [state, setState] = useState<IMyComponentState>(...);

answered Aug 9, 2019 at 9:38

Morphyish

4,07210 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typing component state with typescript when using react hooks

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related