How to create type predicate to check for 2 types of setState in react?

How to Create a Type Predicate to Check for 2 Types of setState in React

When working with React and TypeScript, it’s common to use the setState function to update component state. However, there are situations where you might want to restrict the types of values that can be passed to setState. In this blog post, we’ll explore how to create a type predicate to check for two specific types of setState in React.

Let’s say we have a component with two different types of state properties: count and message. We want to ensure that only numbers can be passed to setState for the count property, and only strings can be passed for the message property. Here’s how we can achieve this using a type predicate:

    type CountState = {
      count: number;
    };

    type MessageState = {
      message: string;
    };

    type State = CountState | MessageState;

    type SetStateAction = T | ((prevState: T) => T);

    function isCountState(state: State): state is CountState {
      return 'count' in state;
    }

    function isMessageState(state: State): state is MessageState {
      return 'message' in state;
    }

    class MyComponent extends React.Component<{}, State> {
      constructor(props: {}) {
        super(props);
        this.state = {
          count: 0,
        };
      }

      updateCountState = (value: SetStateAction) => {
        if (isCountState(this.state)) {
          this.setState((prevState) => ({
            ...prevState,
            count: typeof value === 'function' ? value(prevState.count) : value,
          }));
        }
      };

      updateMessageState = (value: SetStateAction) => {
        if (isMessageState(this.state)) {
          this.setState((prevState) => ({
            ...prevState,
            message: typeof value === 'function' ? value(prevState.message) : value,
          }));
        }
      };

      render() {
        return (
          

             this.updateCountState(1)}>Increment Count
             this.updateMessageState('Hello')}>Update Message
          
        );
      }
    }
  

In the code snippet above, we define two types: CountState and MessageState, which represent the two different types of state properties. We then create a union type State that combines both types.

Next, we define two type predicates: isCountState and isMessageState. These functions check if a given state object matches the respective type. This allows us to narrow down the type of the state in the updateCountState and updateMessageState methods.

Finally, in the updateCountState and updateMessageState methods, we use the type predicates to conditionally update the state. If the current state matches the respective type, we call setState with the updated value.

By using type predicates, we can ensure that only the correct types of values are passed to setState for the corresponding state properties.