CODEWITHSUNDEEP
javascriptfacebookreactjs
Matt Mc
Matt Mc

Reputation: 9297

ReactJS - Can I call setState immediately after renderComponent?

I'm using React for some client-side components. In some cases the components do not know their initial state, so I need a way to render the component and provide it with an initial state, externally.

renderComponent has a callback method:

ReactComponent renderComponent(
  ReactComponent component,
  DOMElement container,
  [function callback]
)

Apparently:

If the optional callback is provided, it will be executed after the component is rendered or updated.

Which is fine, but if I call setState in that callback, you will still see the initial (wrong) rendering for a split second before the component re-renders itself.

So my question is, can I do this:

var myComponent = React.renderComponent(...);
myComponent.setState({...});

...Safely? Can I presume that renderComponent has at least created the backing instance of the component in a synchronous fashion, so that there's something there to call setState on?

This pattern seems to work in my casual tests, using a localhost server, but I'm wondering if this is somewhat akin to using JS to modify the DOM without waiting for the ol' document-ready signal (i.e., prone to inconsistent behavior).

On the other hand, I could pass in a default state object as a prop, and then build the component so that it checks for that prop and populates its own state within componentWillMount or somesuch. Would this be more within the bounds of The React Way?

Upvotes: 1

Views: 3010

Answers (1)

Sophie Alpert
Sophie Alpert

Reputation: 143194

On the other hand, I could pass in a default state object as a prop, and then build the component so that it checks for that prop and populates its own state within componentWillMount or somesuch. Would this be more within the bounds of The React Way?

Yes. State should be treated like private instance variables for a component; you should never ever access them from outside the component, but just as it makes sense to pass options to an object constructor, it can make sense to specify some parts of the initial state of a component in props. React's uncontrolled components (with defaultValue) are an example of this sort of pattern.

When possible, it's usually nicer to keep the state stored higher up and prevent it from getting out of sync, much like React's controlled components. You can do this by making your component take an onChange callback that you then use to update your app's source of truth.

One other note: You should generally use getInitialState instead of componentWillMount; using the latter is currently allowed but may be deprecated in the future.

Upvotes: 5

Related Questions