I am building the UI of an app and I am exploring updating the UI without having to use States. Would the following assertion be crudely correct?

'We do not need States as all its doing is calling the render method automatically on the ponent when something within the state changes. We can achieve the same implementation by calling the render method on the relevant ponent ourselves.

We would still achieve all the same benefits of React (virtual DOM, rendering, painting optimisations etc)'

I am building the UI of an app and I am exploring updating the UI without having to use States. Would the following assertion be crudely correct?

'We do not need States as all its doing is calling the render method automatically on the ponent when something within the state changes. We can achieve the same implementation by calling the render method on the relevant ponent ourselves.

We would still achieve all the same benefits of React (virtual DOM, rendering, painting optimisations etc)'

• javascript
• dom
• optimization
• reactjs
• state

Share Improve this question Follow asked Jan 11, 2016 at 10:01 KayoteKayote 15.7k2626 gold badges9696 silver badges152152 bronze badges 6

• Any application needs "state", without "state" you have no data, and without data, you can't do anything. What do you mean by "without state"? – Madara's Ghost Commented Jan 11, 2016 at 10:10
• @MadaraUchiha Im being specific about React.js. A React ponent can have an immutable state which stores value / s. Whenever there is a change in state, the ponent is re-rendered automatically. – Kayote Commented Jan 11, 2016 at 10:20
• Right, how are you planning to render your ponents without such state? – Madara's Ghost Commented Jan 11, 2016 at 10:20
• 1 Using props, I assume? – Henrik Andersson Commented Jan 11, 2016 at 14:01
• 1 React 0.14 made it easier to use stateless ponents. I've seen a lot about this discussed lately. Here is a link to one of the articles I read. medium./@joshblack/… – Kalpers Commented Jan 11, 2016 at 16:19

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 8

It is technically correct that you do not need to use React's internal ponent state to build a React application. Of course, the data needs to live somewhere, so you need a mechanism which can pass all the data into the top-level ponent (where it will trickle down into all the other ponents) when the data changes.

This is the basic idea behind flux (and many other patterns designed to provide outside-of-React state storage). You have one or more stores and the stores provide change events when their data changes. Then that data gets passed into the application via props.

function render(data) {
  ReactDOM.render(
    <Application data={data} />,
    containerNode
  )
}

myDataStore.on('change', render);

In practice, however, it can be difficult to do this performantly because of how JavaScript works. Code like the above would make React re-render the entire ponent tree each time myDataStore changes, and without good shouldComponentUpdate hooks, this can be a performance issue. Using immutable values helps make it easier to implement good shouldComponentUpdate methods.

What you'll usually see in a larger React application that uses outside-of-React data storage is a bination of:

• One or more "container" ponents that are responsible for getting the data from the stores and passing it to their children. Sometimes it makes sense to put containers somewhere other than the very top of the ponent tree (e.g. you may have several containers in one app)
• Reusable/"presentational" ponents that do not hook into the data store, but provide some other benefit (such as black boxed styles, or an interactive widget). In these cases, it often makes sense to keep any non-application-specific state inside the ponent itself.