Top 6 React Hook Mistakes Beginners Make

Comments · 486

• IC

  @IceMetalPunk · 3 years ago

  React&apos;s own docs explicitly recommend using state-controlled inputs over refs whenever possible. It refers to the ref method as &quot;quick and dirty&quot; because it lets the DOM handle tracking the value instead of React, which can sometimes cause unexpected behavior when React renders its virtual DOM. So... yeah. I think for forms, especially large ones, it&apos;s better to keep track of values in a single state object with key-value pairs. That does mean it&apos;ll re-render whenever a value changes, but since React only manipulates the DOM for the one input that&apos;s changed, it&apos;s not a big deal; and it allows React to have more control over, and more understanding of, the inputs, for optimizations.<br><br>The main issue with using local variables instead of useEffect for composite values is future-proofing: when you add more state to the component, those variables will be re-evaluated on every re-render even if they don&apos;t need to be. In such cases, I think useMemo is the optimal solution; in fact, it&apos;s why useMemo exists! (And I believe recomputing a memoized variable doesn&apos;t trigger a re-render the way setting state does, though I couldn&apos;t find anything definitive about that.) But you are right that in some cases, you don&apos;t need to listen for changes at all, since you can just use the new value at the same time as you&apos;re setting it on the state.

  539

• AD

  @adnanhaider9302 · 3 years ago

  The number of useEffect gotchas and permutations are just never ending. I have such a love hate relationship with this hook.

  20

• TA

  @taulantus · 3 years ago

  For the first case you don’t need state or refs the onSubmit function has access to all the input fields via the event parameter

  13

• VI

  @vighnesh153 · 3 years ago

  Just because 1 code logic doesn&apos;t align with your opinion, doesn&apos;t mean that you can term it as a &quot;beginner mistake&quot;.

  2

• KO

  @komalmadamwar710 · 3 years ago

  this is super helpful

  1

• JA

  @jackwin9641 · 3 years ago

  well this is what I am looking for ages. THANKS KYLE, you made my day, now I can revise my old code at a higher level

  1

• EL

  @elmalleable · 3 years ago

  if its a simple form then you can just take the values from the form event when you submit and you dont really need to keep state provided you have a vary basic use case for the form, complex validations and connected models then you&apos;ll probably go back to using state

  4

• SO

  @solta_carta_tigrinho · 3 years ago

  some of the senior developers in a company I worked for used to not approve my PRs asking for me to not use useRef to the store any state in react component. It is nice to see someone explaining why not every state needs to be rerendering the component on every data update.

  3

• DA

  @darkthrongrising5470 · 3 years ago

  I&apos;ve been tinkering with React here and there for about five years, this is the first I&apos;m hearing of a functional version of useState.

  1

• AS

  @asmmisfar · 3 years ago

  Hey Kyle,<br>This is really very helpful for me. <br>Tomorrow I have a task to complete in my office. <br>I was worried about how to do that.<br>but, this video gave me a clear idea about that.<br>Thanks a lot. Keep going, bro.<br>Loves from Sri Lanka ❤

  5

• ME

  @mehmetacikgoz9814 · 3 years ago

  Using refs instead of state does not seem right in this scenario. First of all, such a render does not create any overhead since behind the scenes react will do equivalent of what you have done with refs. Besides, these code will probably be improved with validators etc. which will result going back to state version

  355

• MA

  @mangman · 3 years ago

  Great video! useRef seems neat, but you do lose the ability to have real time validation, as that logic would be placed in the onSubmit function.

  5