ReactJS - render called, but DOM not updated

Question

This has happened to me a few times. I have always managed to work around the issue, yet I am still intrigued to understand why this happens, and what I have missed.

Ess

Answer 1

After set state use this line

this.setState({})

Answer 2

synchronousSlowFunction is as you mentioned synchronous. This means, that it blocks your component while it is running. That means, that react cannot update your component, because it has to wait for the callback function to complete until it can call render with the updated values. The setTimeout wrap makes the call asynchronous, so that react can render/update your component, while the function is doing its work. It is not the time delay, that makes it work but simply the callback, which is not render blocking. You could also wrap in in a Promise or make the slow function async to prevent render blocking.

Answer 3

Try something Like this:

this.setState((state) => ({
   ...state, renderCondition: true
}));

Maybe you're doing another setState for renderCondition some where the code above should fix such things.

or maybe try using PureComponent

import React, { PureComponent } from 'react'

export default class TablePreferencesModal extends PureComponent {
  render() {
    return (
      <div>

      </div>
    )
  }
}

Answer 4

Can you share the button onClick code? I might be wrong but this looks like an incorrectly set button onClick listener.

Make sure that onClick callback is defined without (), i.e.

<button onClick={this.something} />

instead of:

<button onClick={this.something()} />

Post more code so we can get a better (bigger) picture