state management question having nested components in react

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.