Description
Bug report
Current Behavior
I am using formik in react js project. The form has first name input which takes initial values from local storage if available. On change of first name input, I change its value in local storage.
const prefilledValues = JSON.parse( window.localStorage.getItem("pre-signup-form") );
useEffect(() => { window.localStorage.setItem( "pre-signup-form", JSON.stringify({ ...prefilledValues, ...formik.values }) ); }, [formik.values, prefilledValues]);
I am using useFormik to set initial values. When I change the first name input, which basically changes the value in local storage and hence initial values, It causes too many renders and the page becomes unresponsive.
Expected behavior
Should not cause too infinite renders
Reproducible example
https://codesandbox.io/s/youthful-saha-63bp8t?file=/src/App.js
Your environment
| Software | Version(s) |
|---|---|
| Formik | 2.2.9 |
| React | 18.2.0 |
| TypeScript | N/A |
| Browser | Chrome Version 104.0.5112.101 |
| npm/Yarn | N/A |
| Operating System | Mac Os@12.0.1 |