Skip to content
Advertisement

useDispatch() on onChange prop of input field in React form

Let’s say there are 10 input field data. They are required to persist across 3 pages such as form page, preview page and confirmation page.

So I guess the data would definitely to sit in Redux as global data for the 3 pages. Normally, I would create 10 useState hooks in the form page to store the 10 data/states and assign setState to every onChange prop. Once the submit button is clicked, they will be dispatched as payload and got updated into redux store.

However, one day I came up with an idea why don’t I just assign dispatch to every onChange prop since the 10 data will eventually sit in redux store. With this, I do not need to create 10 useState hooks and feel it is “redundant” to store same data two times ( in both useState hook and redux store).

But this yields another issue, which is frequent call to redux to retrieve newest data using useSelector() and dispatch new action using useDispatch(). But frequent call to redux store should not be a big deal since it is still synchronous right? I got confused and feeling unsure at this point.

Hence, I would like to seek advices from React experts on this…Does that mean in my case, using useDispatch only (not both useState and useDispatch) is better?

JavaScript

Advertisement

Answer

Both the approaches (calling useState or dispatch onChange event) are different in terms of blocking and non-blocking UI thread.

useState implementation -> Whenever the state updated react re-renders the component but for the frequent state update react queues the state update and update it on UI. So this is a non-blocking implementation.

dispatch implementation While redux dispatch the actions in a synchronous manner, so it blocks the execution of code due to which it may increase ui update time on screen and also may cause some unexpected results.

So you can go with the way managing the local state in the component and dispatch the collective response in on go. This approach will also help you to validate the user input as well before dispatching it.

Use state

JavaScript

Add a unique id with the input element

JavaScript

Implement the handleChange function

JavaScript

And at the end you can dispatch this state to redux store

User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement