Search code examples
reactjsreact-hook-formreact-query

react-hook-form custom validation issue

I'm trying to validate the input after the API request. It looks like value hasErrors is not updated within a validation function. Only after the rerender it gets the value.

And - yes I tried many things like useCallback, setting the state to force rerender

Maybe you can spot the issue

https://stackblitz.com/edit/vitejs-vite-hj9vsw?file=src%2FApp.tsx

I tried to do the same with formik and swr and got it working

https://stackblitz.com/edit/vitejs-vite-2ccgg9?file=src%2FApp.tsx

Finally, it works now - special thank-you goes to AI for the ideas

https://stackblitz.com/edit/vitejs-vite-dzd5wd?file=src%2FApp.tsx

Solution

  • So the problem was in a different spot. Make sure that your custom hooks are correctly returning values. If you extract them before returning - they loose track of changes.

    https://stackblitz.com/edit/vitejs-vite-gpdnjb?file=src%2FApp.tsx