I have a form with 30 fields and all those fields are a template from a value in a dropdown, if I change the value of the template I will end up creating a custom template.
So the action is:
When we are changing a value from the form, the template will change in custom template
As you can see there are some logic that come up and down and I'm worried about the multiple setState declaration and call. Should I use useReducer or useState?
From the useReducer documentation:
useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.
You should use the useReducer to manage you complex form, otherwise you'll end up having many useState and a many useEffects to update every other state when one of those useState changes. In this case useReducer is definetevely the best option.
In this way all your UI elements will be a visual representation of the useReducer state, so any value change in a field must trigger an action to update the state and then the UI.
You can also try using an existing library like react-hook-form, but this choise is up to you and depends on your requirements.
Related
I want to run a function ONLY some of the time I update a state values using setter function of useState hook in react, how would I do it?
In my code flow, I update the state value in multiple places, but need to run callbacks only on few of them, because of this I can't use the useEffect way which is widely prescribed.
I'm building a project with react styled components, And I need to check if checkbox is checked.
Now I'm doing it with react hook (usestate).
I would love to know if there is a built-in method that returns true or false
The two ways of handling forms with React are described (and documentation linked) below:
Controlled Components
In HTML, form elements such as , , and typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().
Uncontrolled Components
To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.
And also from the React documentation:
If you’re looking for a complete solution including validation, keeping track of the visited fields, and handling form submission, Formik is one of the popular choices. However, it is built on the same principles of controlled components and managing state — so don’t neglect to learn them.
Now I'm on changing class based component into functional component, and there's instances which I should determine to use useRef or useState.
I already tried to get my answers using stackoverflow Q&As, it keeps me wondering.
What I understood is useRef and useState keeps value during whole apps, and useState cause rerendering and useRef is not.
we needs rerendering process if there's some changes in view, If so, Should we create whole variables with useRef which is not in return( <> ...</>)> ?
Generally Ref is used when you dont want to component re-render again but you want value in some form so that you can use later. In layman term if you just want to play with dom related stuff like updating width, height etc.
Common example for using ref:
When you want to focus in and out your input without using state(as you dont want to render the component again)
Updating dynamically style(Fox ex: You create your accordian then you want to update heigh and show transition when according open and close(if you dont want to show you can avoid this example))
If you want to create this type of utilities then you dont need to play with states you can do only with ref
for most use cases you want to handle your react component's behavior through state provided from useState (or props where you get as parameter). that's the React way to go.
eventually there will be cases to useRef, where you may need for example to access a DOM element directly for some special reason. but they are exception cases. if you you see yourself calling useRef throughout your application you are most likely doing something wrong.
I use react hooks useReducer that contains my state, let's say I have 3 state fields - a,b and c.
Those fields tie together and mostly change together - so the reducer function is cohesive.
If I have different state field d that is not cohesive to the other state - should I use both useState (for d) and useReducer (for a,b and c) at the same component or it's better to use the same reducer function? Moreover - if I have more fields like d that changes in similar places - should I use 2 seperate reducers?
What is the best practice for this case?
My advice would be use both useState and useReducer, given useReducer is just an abstraction around useState.
Just like you wouldn't try to cram all the state of the component into one useState hook, you likely should also avoid doing that for useReducer.
I tend to try and abstract the useReducer to a global context and use useContext in conjunction with the reducer to get my application state. However, sometimes it makes sense to use useContext and useState if the component has an internal state. That being said, I don't think there are any hard and fast rules for hooks at the moment, so I would read up more and make the best choices for your team. That being said, I do agree with what IliasT said about cramming state into one useState. If you go with the useState hook use one for each piece of state and don't try and make an object that controls the state.
I am trying to find a lib to use for my forms, to handle validation and stuff, and I come across redux-form which seems to be the most popular one.
There is one thing that troubles me with it though. In FieldArray example https://redux-form.com/7.2.3/examples/fieldarrays/ they modify props to add/remove fields. Isn't that actually anti-pattern which conflicts with functional programming principles?
From the docs: https://redux-form.com/7.3.0/docs/api/fieldarray.md/
fields.push(value:Any) : Function
Adds a value to the end of the array. Returns nothing.
This is not a mutator; it dispatches an action which updates the state in Redux, which will cause your component to rerender.