Render component with async ComponentDidMount

Question

I would like to create a <textarea> that behaves like console.log.

class Console extends Component {
...
    async componentDidMount() {
        for (var i = 1; i < 10; i++) {
           setTimeout(() => {this.setState({message: 'updateMessage' + millis()}, 1000);
        }
    }
    render() {
       return <textarea>{this.state.messsage}</textarea>
    }
}

I expected this code to update the UI in realtime. The issue is that componentDidMount waits until all the setTimeout's functions are executed in the loop then renders everything all at once.

Is there something I am misunderstanding? Thanks

that's working as intended since you all the set time out resolve at the same time. — Someone Special
– Someone Special, Commented Jan 3, 2021 at 21:08

Someone Special · Accepted Answer · 2021-01-03 21:18:51Z

2

Your setTimeout are all resolved at the same time, and your messages are not in array, hence it's overwritten each time.

If I use a delay promise, instead of set timeout, then the state will be updated accordingly.

const delay = async () => {
  await new Promise((resolve) => {
    setTimeout(resolve, 1000)
})
}

Example: codesandbox

class Console extends Component {
...
    async componentDidMount() {
        for (var i = 1; i < 10; i++) {
           this.setState({message: 'updateMessage' + millis()})
           await delay()
        }
    }
    render() {
       return <textarea>{this.state.messsage}</textarea>
    }
}

answered Jan 3, 2021 at 21:18

Someone Special

13.7k8 gold badges54 silver badges80 bronze badges

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

Collectives™ on Stack Overflow

Render component with async ComponentDidMount

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