Is it a bad practice to keep strong ui related state inside of the react component?

react hooks
redux
react state
react redux
react setstate best practices
state management react
react render conditionally from props
conditional rendering react

I am migrating my reactJs app to redux/mobx. For now I have 3 components, each of them have, in their state, the following structure:

name:string,
surname:string,
showError: boolean,
loading:boolean

As you can see it can make sense to move name/surname to a centralized repository so to maintain a global state. I'm not so sure about showError and loading: they are booleans meant to show an error message and a spinner inside of the specific component.

I personally don't like the idea of putting such "UI-related state" in the centralized state, I'd like to make it stay inside of the specific component as other components will never have the need to access/update such things.

So my idea is the following:

this.state = {showError, loading};
this.businessState = props.state;

In short I will continue updating the "state" with the React's setState() function, while leaving to redux/mobx the management of the so called "business state".

Can this be a good practice or I am doing something particularily bad?

Personally I'd suggest making store for most components and from my experience most of the stores actually are ViewStore's. If you have similar logic like loading and errors on multiple components then it's even easier with doing something like this:

class BaseViewStore {
    @observable loading = false
    @observable showError = false
}

Then your component store would just extend this store and you'd have reusable logic within this base store. Everything that is component specific would go in that specific store of course. That way your components would be clean, have no personal state (within component itself) and could be easily replaced with other components since your behaviour (state) would be in the stores.

Organizing State, I am migrating my reactJs app to redux/mobx. For now I have 3 components, each of them have, in their state, the following structure: name:string, surname: string� Initializing component state with the constructor is not that much bad practice but it increases the redundancy in your code and makes some performance issues. When you initialize the state inside the class constructor it unwantedly calls super and remembering about props, it makes performance issue.

I personally have no problem with this as 'loading' and 'showError' relate to the state not the UI component. It is basically saying, when I populate my state from an API call, is it done yet and did anything go wrong? The UI component displays accordingly.

I would make showError a string or string[] depending on the structure of the errors thrown from your BE system.

I would also break your state into specific reducers that deal specific business functions and load states based on the specific business functions and not load per component on the page.

I hope that helps in some way.

5 common practices that you can stop doing in React, Style Guide: Best Practices Should I ever use React's setState()?; Can I put functions, promises, or other Should I put form state or other UI state in my store ? or UI state, such as “is this dropdown currently open”, inside a component's #815: Working with Data Structures � #946: Best way to update related state fields � To enable developers to write state-full, function-based components and at the same time give the ability to use state and component life-cycle methods, React v16.8 added a new feature called

I'm not sure if It's a best practice or not. But the loading state is used when you do some async action like get data from API. The best practice for getting data like that is doing via action. And what I usually do inside the action is to dispatch a loading state before call the API, and dispatch a reducer which set loading to false after got the data.

So, in my opinion. I would store loading state inside redux instead of using component state.

It would be something like this

action.js

getData = () => {
   return (dispatch) => {
      dispatch({ type: LOADING });
      callApiToGetData()
         .then(data => {
            dispatch({ type: SUCCESS, data })
         })
         .catch(e => {
            dispatch({ type: ERROR, error: e })
         })
   }
}

reducer.js

const initialState = {
  data: null,
  loading: false,
  error: null
}

function reducer(state = initialState, action) {
  switch (action.type) {
    case LOADING:
       return { ...state, loading: true }
    case SUCCESS:
       return { ...state, loading: false, data: action.data, error: null }  
    case FAIL:
       return { ...state, loading: false, error: action.error }
    default:  
       return state
}

Best Practices for Component State in React.js, There are many best practices in React that really aren't so great. On each render(), React generates a tree that's composed of UI The component won't update if any other props/state has changed except color/count. But when you are using closures inside the render() method, it's actually bad. 1 Unable to close new WPF window until all UI threads are returned even 1 Is it a bad practice to keep strong ui related state inside of the Practice & Theory

Where to Hold React Component Data: state, store, static, and this, When writing React applications, it's important to know when and when not to Store the simplest possible values to describe a component's state. BAD: remove 'hover' from this.state.classes when the mouse leaves the and purely UI-related state that you don't want in your Redux store. Great article! Note: React 16.13.1 fixed some cases where this was overfiring. If upgrading React and ReactDOM to 16.13.1 doesn't fix the warning, read this: #18178 (comment) React version: 16.13.0 Steps To Reproduce Build a time machine.

Two mistakes in React.js we keep making over and over again, Where to Hold React Component Data: state, store, static, and this The current best practice is to use local state to handle the state of your user The Redux store is great for keeping application state rather than UI state. First of all many devs switch to ReactJS because of the many advantages it has compared to other UI frameworks. It is hard to make out the disadvantages, because there are many advantages that come with them.

Best Practices With React Hooks — Smashing Magazine, What to do when React Native app slowly responds to such simple While it all started from a struggle with inefficient practices in user-facing components, Also, a component might be already in bad shape owing to the efforts of a repeater inside, even if a change in the current state was not related to� But so that the state will not be stored in the React component. For the same hook, the result of the call will be the same. So we can call one hook in different components and work together on one state. When updating the shared state, each component using it will be updated too.

Comments
  • If you can't benefit from having UI state in global state, it likely belongs to local state.
  • Would it be possible to use async/await inside of reducers? Or am I forced with that snippet with promises? I ask because for now I am using mobx and I'm not very expert about redux
  • It's possible to use async/await in action (not reducer. reducer is just for mapping data after business logic from action). Just make sure you use the version of babel and ecmascript you are using supports it.
  • just to be added. You need to use redux-thunk to make it possible to do such asynchronous actions.