Open diamantisufi opened 4 years ago
and what do you expect ? its controlled mode so this it is how it works, you could use uncontrolled mode 2 https://reactjs.org/docs/uncontrolled-components.html
https://material-ui.com/components/text-fields/#uncontrolled-vs-controlled
@serusko The signature of onChange
and onBlur
shouldn't be changing. The problem isn't that it's re-rendering, but why it's rerendering. There's also no way to improve any performance via things like memoization, PureComponent, shouldComponentUpdate etc.
@serusko The signature of
onChange
andonBlur
shouldn't be changing. The problem isn't that it's re-rendering, but why it's rerendering. There's also no way to improve any performance via things like memoization, PureComponent, shouldComponentUpdate etc.
Do you have an answer for that?
no with formik there is no way optimize performance because its built with react context which breaks formiks neck, main argument from author from times when we had "figh" between final form and formik its now showstoper for using formik for really complex use cases and you need to switch somehow to useSelector like hook (Redux like usereducer), in the end, once u get how formik works you dont need it and you can create more powerful wrapper for your specific use case its really not so hard you just need to follow inout component interface
btw for text input you can write debounced onchange but you will face some ux issues right after that...
@serusko t.y. There are indeed many issues with using useFormik Do not understand what it is for
Anyway I used the end with Formik component The problem is that I can not take the reset and send functions out of the scope
You can check out an Alpha prototype of Formik with "useSelector" - like render optimizations built in here: https://www.npmjs.com/package/@johnrom/formik-v3/v/3.0.0-refs2
Basically it removes state from useFormikContext and instead is opted in from Formik's helper components via formik.useState(state => selector(state), comparer);
For Formik's components there is no difference in usage, just a huge performance boost. If you use Formik's state manually by using useFormik, you'll have to manually call formik.useState or use the various convenience hooks provided in v3.
The API is probably not final but I think it's the way Formik needs to go. The only other alternative I know of is proxies but I'm not a huge fan.
There are a few versions on there where I'm building out various functionality, but the most stable one is 3.0.0-refs2.
Is there any other suggest about how improve performance ? In my case, It's would trigger 3 times re-render by onBlur event. So weird.
@chuhancheng did you solve this performance problem?
I applied formik on material-ui inputFields and I realized that on every key-event or blur, the onChange and onBlur are causing my component to re-render on each event.
This is a piece of code for one of my textInputs