If a component has a lot of asynchronously-loaded data, I often find myself writing something like this:

interface MyState {
  summary: string | null;
  leftContents: string | null;
  rightContents: string | null;
  number: number | null;
}

interface MyProps {
  id: number,
}

class MyComponent extends React.Component<MyProps, MyState> {
  state: MyState = {
    summary: null,
    leftContents: null,
    rightContents: null,
    number: null,
  }

  componentDidMount() {
    fetch(`/api/${this.props.id}/summary`)
      .then(res => res.json())
      .then(data => {
        this.setState({
          summary: data['summary']
        });
      });
    fetch(`/api/${this.props.id}/leftContents`)
      .then(res => res.json())
      .then(data => {
        this.setState({
          leftContents: data['leftContents']
        });
      });
  ...

And then the rest of the component is littered with this.state.summary === null ? checks and this.state.summary?.includes optional chains etc.

Inspired by seeing TypeState patterns in Rust, I would rather write code where it is illegal to access this.state.summary until the summary has finished loading and been set, and the compiler will be able to tell me and help me.

I imagine this should be possible with types, but I haven't been able to yet think of a way to solve it, because the component only has one MyState generic parameter.

How can I reflect the current runtime state of the component in the type system, so that the compiler can help me and so that I won't have to have null checks everywhere?

If a component has a lot of asynchronously-loaded data, I often find myself writing something like this:

interface MyState {
  summary: string | null;
  leftContents: string | null;
  rightContents: string | null;
  number: number | null;
}

interface MyProps {
  id: number,
}

class MyComponent extends React.Component<MyProps, MyState> {
  state: MyState = {
    summary: null,
    leftContents: null,
    rightContents: null,
    number: null,
  }

  componentDidMount() {
    fetch(`/api/${this.props.id}/summary`)
      .then(res => res.json())
      .then(data => {
        this.setState({
          summary: data['summary']
        });
      });
    fetch(`/api/${this.props.id}/leftContents`)
      .then(res => res.json())
      .then(data => {
        this.setState({
          leftContents: data['leftContents']
        });
      });
  ...

And then the rest of the component is littered with this.state.summary === null ? checks and this.state.summary?.includes optional chains etc.

Inspired by seeing TypeState patterns in Rust, I would rather write code where it is illegal to access this.state.summary until the summary has finished loading and been set, and the compiler will be able to tell me and help me.

I imagine this should be possible with types, but I haven't been able to yet think of a way to solve it, because the component only has one MyState generic parameter.

How can I reflect the current runtime state of the component in the type system, so that the compiler can help me and so that I won't have to have null checks everywhere?

• reactjs
• typescript

• 1 I edit the question with working completed code using jsonplaceholder APIs. It will load the relevant data for passing prop id value. – Shashika Silva Commented Mar 15 at 6:20

1 Answer 1

A couple of thoughts here:

1. Use child component with props defined like so:

interface ISummaryProps {
  summary: string
}

Render child component in the parent only when parent finished fetching (conditional rendering). This way you keep business logic in the parent and rendering logic in children.

2. Create getter in your component like so:

private get summary(){
  if(!this.state.summary) {
    throw new Error('Expected summary but got undefined')
  }
  
  return this.state.summary
}

After this you can just use this.summary and it will return string but you need to make sure you don't attempt to access the field before fetching is done.