locked
state management question having nested components in react RRS feed

  • Question

  • User1034446946 posted

    I am trying to figure out forms (and i mean complex forms, not the very simple examples you get)

    I have a base form (parent) which has a state of

    const [category, setCategory] = useState({name: '', tags[] })

    as i understand it i can build a child component and tags the tags in as a prop which refers to the state of tags which I can display it, but in order to modify it i will also need to pass in a function to the child compenent so it can be modified by the parent.

    this messed me up for a while but i now have it sorted.

    However my issue is now my form is about to get very complicated, the parent state will have a property with an array of objects which will have an array of objects which will have an array of objects. you see where i am going.

    which means i will be passing down multiple states and multiple handlers, which is going to get out of control quickly

    can anyone confirm the best way of approaching this, i am thinking i will just be using the context hook, but i am worried this might lead to performace issues importing the context in most complonents.

    Any thoughts would be appriciated.

    Sunday, September 1, 2019 2:34 PM

Answers

All replies

  • User475983607 posted

    However my issue is now my form is about to get very complicated, the parent state will have a property with an array of objects which will have an array of objects which will have an array of objects. you see where i am going.

    Rather than trying to guess at the problem you are trying to solve, can you provide an example that highlights the programming problem?  Perhaps share markup that illustrates what a complex form means to you.

    Sunday, September 1, 2019 6:19 PM
  • User-474980206 posted

    if you want to share the state between components, then you should use the useReducer hook with shared context. a good article:

    https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext

    you could also switch to redux for state management. it now has hooks for pure functions.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 1, 2019 6:39 PM
  • User1034446946 posted

    right i get it now, i was looking at the term useState for primatives and useReducer for the information being added to state, not the process that gets it there, eg useState is a simple set state as x, where as a reducer is this my param do this with it then state = x.

    the only problem i have is wrapping context providers in my routing function breaks all the routing, I know this is known but haven'tfound a solution yet.

    need to looking into redux a little more, but at present context will do what i thought so alls good.

    Sunday, September 1, 2019 10:10 PM
  • User1034446946 posted

    looks like i am going to have to use redux for now, as my site is a lot of forms and Context Api is not recommended for high frequency updates due to re rendering,although although i will need reducers for both approaches anyway.

    Monday, September 2, 2019 1:29 PM