PropTypes are helpful for debugging because they show a warning when an expectations is not met. Beyond that, they're also nice to express the intention of how a component is meant to be used.
If I have a component that accepts a prop with a value that can be a promise, is there some way I can express that using PropTypes? I'm picturing either something direct like PropTypes.promise, or some way to express the concept of a "thenable" using building-block PropTypes.
Here is a highly simplified example to show my intended use case:
class SomeComponent extends Component {
  static propTypes = {
    someDataPromise: PropTypes.object // <-- can I be more expressive here?
  }
  state = {
    isLoading: false
  }
  async handleSubmit() {
    this.setState({ isLoading: true });
    const data = await this.props.someDataPromise;
    const response = await fetch(`/some/api/endpoint?data=${data}`);
    // do something with the response
    this.setState({ isLoading: false });
  }
  render() { /* ... */ }
}
You could use an object with a particular shape e.g.
  PropTypes.shape({
     then: PropTypes.func.isRequired,
     catch: PropTypes.func.isRequired
  })
Another way you can express that a prop is a Promise is to use PropTypes.instanceOf().  Important caveat: this only works if your promises are instances of the Promise class:
static propTypes = {
  someDataPromise: PropTypes.instanceOf(Promise)
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With