Question 253809 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React props to global state mapping

I am creating a reusable component for one of my application. This component internally has complex state management involved with lots of prop drilling. Hence i have used a React pattern with the combination of useReducer and useContext and created a global store. So my global store looks like something below

{
    stateVar1: '',
    stateVar2: '',
    stateVar3: '',
    stateVar4: '',
    stateVar5: '',
}

Also my component takes multiple props something below

<MyComponent prop1={''} prop2={''} prop3={''} prop4={''} prop5={''} prop6={''} prop7={''} />

Since there are so many props (More than 20), and these props are needed deep in the component tree, i am planning to make this prop as well as part of my global state in the root component by something like below

const RootComponent = (props) => {
    useEffect(() => {
      dispatch({action: 'set_prop', data: props}); // reducer
    }, [props]);
}

which converts the global state to something like this

{
        stateVar1: '',
        stateVar2: '',
        stateVar3: '',
        stateVar4: '',
        stateVar5: '',
        props: {prop1, prop2, prop3, prop4 ...}
}

So my question is, is it okay to make props as part of the global state ? Is there any corner case i am not aware of ? Thanks in advance !

Tags:

2

Answers


  1. 0

    It depends on where you store the global state, and how much the props data will be changed.

    1. Context
      Works well if your props rarely changes. If your props changes a lot, it will make your whole app rerenders everytime any props change (assuming you put the state provider at the root)

    2. Redux / Zustand / other global state management libs
      For this I think it doesn’t have any issue, but you need to have good selectors, so for example, if you use redux and you get state like below

    const state = useSelector()

    when in reality you only need for example stateVar1, your component will rerender everytime any attribute in that slice changes

    Other than that, I think no other issue, just that your components will be highly coupled to your app (What I mean is, your component won’t work well outside your redux store provider)

    Login or Signup to reply.
  2. 0

    I have reservations about the feasibility of pursuing this particular approach in this case. As you astutely pointed out, the method of passing these props from the global scope down to these individual components could pose a significant challenge.

    It’s apparent that making alterations or adjustments to any of these props, for whatever reason, would demand a considerable amount of effort and entail numerous modifications throughout the codebase.

    Given the nature of this situation, which involves the tedious process of props drilling, I would strongly advocate for adopting the provider pattern.

    This pattern stands out as one of the most advantageous strategies for circumventing the complexities associated with props drilling.

    The Pattern: Provider Pattern

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search