Do you have any experiences with fast react form? I have tried redux-form, antd form. Both are slow. When I am writing inside input fields.
The form what I want to do is quite complicated. It is a dynamic form with many fields. See attached image, that type is select where the selected value is displaying next fields.
Here is example in antd. https://codesandbox.io/s/yjz6r2z2l9
Your form is working slow because of rerendering entire form content on every state change, even single keystroke. React needs some optimizations to avoid that - f.e. shouldComponentUpdate and PureComponent usage.
Try formik. Beside <Field/> it has <FieldArray/> and <FastField/>, probably usabeful for this case.
Remove console.log, use react dev tools.
Related
I am working on an application having nested forms. I am confused about which of them is best. I worked on react-reactive-form and it fulfils all the requirements of my app but has some issues with nested structure, especially with FormArray(to add new, prefill form array and delete the array element from a particular index). Basically, I need to do some extra code to achieve these.
After this, I saw lots of people using "Formik", especially when working with React. I'm new to Formik, I didn't know whether it's better in performance or not. Also, I didn't see any article that explains their technical performance part.
There is just a downloads comparison I found:: https://npmtrends.com/formik-vs-react-reactive-form
Formik: https://github.com/jaredpalmer/formik
React Reactive Form: https://github.com/bietkul/react-reactive-form
or React Hook Form:: https://www.npmjs.com/package/react-hook-form
My requirements:
need to use multiple and nested form structures inside my application.
require form validations of change, on blur or submit
handle data in the array where I can add new items dynamically, and also delete, add and update anything.
Most important:: Can pass controls to another component as reactive form does. This means if we want to create a form in the parent and then subdivide the form sections into components where we can pass that section form field controls to the child component and still after on change can get complete form values at one place that is at parent component.
Which of them is best in terms of performance, and can achieve all the parts easily I have mentioned.
use react-bootstrap for Form, Input, Button, etc
I create 2 Text Boxes one with hook and the another one with the old style, now in Hook mode when the user input change the textbox value the whole page rendered, but with old style there only the text-box rendered not the whole page, if you have the complex page with many objects like (Data Table, form, buttons, inputs, etc..) the single change on one of these components forced to re-render everything and it decease performance, for example typing in the text-box take time to effect on page and the delay time is more than user typing speed.
the one workaround solution is using the callbacks and useMem but if the page is complex(lots of objects as described, and all of these objects has many properties the callback and useMem is very very complicated to handle single object property.
SandBox Example
This is exactly how react hooks should work. what will cause a rerender in react? two things:
change in props
change in hooks or say in a better way hooks state
in the second case, the useInput state is changing so that causes a rerender and it's absolutely normal behavior. I think using custom hook in that way is not a good practice.
I recommend reading this article for more information on react rendering: https://www.codebeast.dev/usestate-vs-useref-re-render-or-not/
As seen in the above picture react hooks form greatly reduces the rerenders and performs much better than formik. But when used with controlled components from UI libraries like material UI, would it still reduce rerenders and or rerender on every input change like Formik?
Yes additional rerenders dont take place even when is used. It can be seen here
https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r
Yes, you can also use formik-matierial-ui package for bindings: https://github.com/stackworx/formik-material-ui
I'm using react-hooks. So there is a modal that pops up with a bunch of inputs (components) like text fields, drop-downs, date pickers and etc...
The problem is when some field is being edited, all my form components are being re-rendered and that makes my form very slow. I totally understand why it happens. However, I would like to find a way when I edit some input within my form, all other input fields (components) should stay "frozen" and not re-rendered. Otherwise, working with my form which has at least 20 input fields, would make the work very slow...
Your assistance is appreciated!
You can use Uncontrolled components. It doesn't use setState, so it won't be re-rendered when you type some input value. Then you can send everything when you submit your form.
Try using React.memo which is in some way an equivalent to shouldComponentUpdate
Check React.memo documentation
We've been using redux-form and seeing a noticeable lag when user types in an input field. I'm not really sure if it's a problem with redux-form. This could probably be the way we've structured our components. So we have page which lists some data, say 25 rows and filters for it. On click of a button, we open a modal where we render a redux-form. Now if user types in any of the input field, all the list items in the underlying page also get re-rendered. We're using React.Component for list items. React devtool's "Highlight updates" option highlights list items but when I do a console.log in list item's render method, it's not printing!
Wonder if this is happening because the list item's parent component is also a (redux) connected component and when redux-form's Field updates the store, this also gets re-rendered? How do you use redux-form in such scenario? I don't think having multiple stores is a recommended way.
I'm guessing you have an event listener for when any of the inputs on the form changes, and then you do some fetching/filtering on the underlying list?
Running this when typing quickly could lead to a performance hit, depending on what your event listener does. You could try using something like lodash.debounce to only run your listener after the user has stopped typing for like 200ms?