Philip Walton Philip Walton - 3 months ago 19
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

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

Here's a code example:

export default class MyComponent extends React.Component {

handleButtonClick() {
this.render();
}

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


Clicking the button internally calls
this.render()
, but that's not what actually causes the rendering to happen (you can see this in action because the text created by
{Math.random()}
doesn't change). However, if I simply call
this.setState()
instead of
this.render()
, 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

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

https://facebook.github.io/react/docs/component-api.html

Comments