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.
Related
Are there any reasons not to use useRefs for storing state?
It appears that they are faster for saving in comparison to setState.
I mean ref.current = 2 executes immediately whereas setState(2) takes some time and therefore you can't call another function right after it.
The only problem I see is that useRef doesn't trigger rerenders, but if some other process already does it for the component why not to use useRef for storing state?
is there any promise about order of useState setters,
lets say my code looks like this:
const [one,setOne]=useState(0)
const [two,setTwo]=useState(0)
and lets say theres a handler or a useEffect with the 2 consecutive lines:
setOne(1)
setTwo(1)
is there a guarantee on which setter runs first? I'm asking since its not the same as asynchronous function followed by synchronous function
React does batching of all state updates at once so order does not really matter...if there are consecutive state updates then React will update in a single render.
useEffect run in the order in which they are defined.
It seems to me that one could replace useEffect/componentDidMount with a state hook and function components. For example, if I wanted to make a fetch in useEffect or componentDidMount, I could simply create a function component that rendered the component that needed fetching, add the fetching method in the function (which will execute upon rendering) which modifies a state hook (so that once the data arrives, the page will re-render with the data). Since React has selective rendering, any other part of the function component that gets updated won't cause an unnecessary fetch.
Am I correct in saying this? Are there any other specific instances where useEffect/componentDidMount is strictly better?
Am not sure why you want to replace componentDidMount in class component or useEffect with a custom function for the use case you highlighted but those two are different in terms of behavior, componentDidMount is one functionality that useEffect provides in function component. useEffect is a combination of componentDidMount and componentWillUnmount and you can have mulitple useEffect on one function component. useEffect accept array of values that could make it run again, all you do is specify those value for that particular useCase you wanted and whenever that values changes the useEffect is called, for UI changes you attach your useState to your logic and if followed accordingly you wont get unnecessary fetch request, if you want useEffect to be called just once then attach just an empty array like this useEffect(()=>{//your fetch logic here },[])
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.
I am using a custom hook without a state and want to "persist" the hook.
The hook is called useMessage() and should only be rebuilt in the first render cycle since i don't use any state in there.
I want to have a global hook the redux hook useDispatch().
How is that possible?
EDIT:
I just want to have 1 reference / a singelton of my hook to not get rerendered all the time!
Is there any way to memorize the hook? My goal is that i am able to add the hook in dependencies of e.g. useEffect() and this never will cause a rerun of the useEffect(). Just like useDispatch / useRef / ...
I'm not sure if this is what you mean - but try this:
const [myValue] = useState(() => myInitialValue);
useState accepts a callback function as a parameter, which will only be executed on first render for your component. For all future renders, it will return the first value that was returned from your function.
Well the answer is - you just can't. A custom hook will always rerun if the component where you included it runs again.
What I expected: Just return a memorized Value (useMemo) containing the dependencies in the array. This will keep the custom hook simple and only a small part will rerun.