Philip Walton Philip Walton - 1 year ago 136
React JSX Question

Can you force a React component to rerender without calling setState?

I have an external (to the component), observable object that I want to listen for changes on. When the object is updated it emits change events, and then I want to rerender the component when any change is detected.

With a top-level

this has been possible, but within a component it doesn't work (which makes some sense since the
method just returns an object).

Here's a code example:

export default class MyComponent extends React.Component {

handleButtonClick() {

render() {
return (
<button onClick={this.handleButtonClick.bind(this)}>
Click me

Clicking the button internally calls
, but that's not what actually causes the rendering to happen (you can see this in action because the text created by
doesn't change). However, if I simply call
instead of
, it works fine.

So I guess my question is: do React components need to have state in order to rerender? Is there a way to force the component to update on demand without changing the state?

Answer Source

In your component, you can call this.forceUpdate() to force a rerender.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download