question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Watch changes without rerender

See original GitHub issue

Hi, there is an option in react form hook that we can watch values change. but there is a problem with it that every time a watching variable changes a re render occur in my components. I know you have a solution in advanced part to use memozation to reduce re renders. but I want a way to listen to variables change without any re rendering. I think it should be handle by adding extra argumnet in useForm function for listening to changes. there should be a function as argument to pass to useForm to called every once a change occurs;

const form = useForm({listener});
listener(data) {
  // something like autosave form in backend
}

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:6
  • Comments:20 (6 by maintainers)

github_iconTop GitHub Comments

16reactions
FatehAKcommented, Apr 14, 2020

Hi @bluebill1049 facing the same issue here watching a single field (an isolated child component) seems to trigger a rerender of the parent component and any other watched child components

8reactions
bluebill1049commented, Jan 27, 2020

you can achieve this by attach onChange on your input and invoke getValues(), I don’t have any plan to grow API just yet. Thanks for your suggestion.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Problem of re-rendering useEffect with watch all fields using ...
You are using react-hook-form watch method. this method will re-render at the root level of the app whenever a field value is changed....
Read more >
useForm - watch - Simple React forms validation
This API will trigger re-render at the root of your app or form, consider using a callback or the useWatch api if you...
Read more >
useHooks - Easy to understand React Hook recipes
This hook makes it easy to see which prop changes are causing a component to re-render. If a function is particularly expensive to...
Read more >
FAQs | React Hook Form - Simple React forms validation
watch : subscribe to input's change via event listener and re-render based on which fields that are subscribed. · getValues: get value which...
Read more >
Why custom react hooks could destroy your app performance
I'm not going to explain how to build and use hooks here, ... state changes are one of the reasons why a component...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found