Should you ever use this.setState() when using redux?

Question

Should you ever use this.setState() when using redux? Or should you always be dispatching actions and relying on props?

Hypotrachelium

There is nothing wrong in having some components with state. – Shotton

That completely depends on where the state is being used. Think of redux stores as being global. Anything that doesn't need to be global can remain private to a component and its children. – Gradey

Answer 1

Clear uses of setState would be for UI components that have local display state, but aren't relevant for the global application. For example a boolean that represents whether a specific dropdown menu is actively displayed doesn't need to be in global state, so it's more conveniently controlled by the menu component's state.

Other examples might include the collapse/expand state of lines in an accordion display of a hierarchy. Or possibly the currently selected tab in tab navigation. However in both of these examples you might still choose to handle UI state globally. For example this would be necessary if you wanted to persist the expand/collapse state in browser storage so that it would be preserved by page refresh.

In practice it's usually easiest to implement such UI elements with local state, and refactor them into global state as needed.

Incredulity

To follow up with this, the relevant Redux FAQ entry emphasizes that use of setState is completely fine: redux.js.org/docs/faq/… – Wine

If you're going to handoff or use server-side rendering, I think you should always use Redux – Durning

Redux FAQ link has been updated to redux.js.org/faq/organizing-state – Wiatt