reactjs this.refs vs document.getElementById

by

In general, refs is better than document.getElementById, because it is more in line with the rest of your react code.

In react, every component class can have multiple component instances.
And as @Isuru points out in comments: using id is dangerous, because react does not prevent you to have multiple forms on 1 page, and then your DOM contains multiple inputs with same ID. And that is not allowed.

Another advantage to using refs, is that by design, you can only access the refs in the context where you define it. This forces you to use props and state (and possibly stores) if you need to access info outside of this context.
And this an advantage, because there is less/ no chance of you breaking your unidirectional data flow, which would make your code less manageable.

NB: In almost all cases, refs can be avoided altogether. It is a design principle for Netflix to use no refs, ever, as explained by Steve McGuire (Senior User Interface Engineer at Netflix) in this video from reactjs conf 2016 (9:58m into the video).
In your case, this would mean putting the email-input value in state of the form, add on onChange handler, and use the state value in the submit event.

More Related Contents:

  1. How to Protect website code PHP / JS? [closed]
  2. React useEffect in depth / use of useEffect?
  3. Is useState synchronous? [duplicate]
  4. What happens when using this.setState multiple times in React component?
  5. What does npm install –legacy-peer-deps do exactly? When is it recommended / What’s a potential use case?
  6. Import JSON file in React
  7. Uncaught ReferenceError: React is not defined
  8. Deprecation warning using this.refs
  9. Binding vs Arrow-function (in JavaScript, or for react onClick)
  10. How to allow CORS in react.js?
  11. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  12. Use if statement in React JSX
  13. css position absolute making the textbox go down
  14. Can’t resolve module (not found) in React.js
  15. React-router v4 – cannot GET *url*
  16. Using Matter.js to render to the DOM or React
  17. Rendering an array.map() in React
  18. Does new React Context API trigger re-renders?
  19. Should we use useCallback in every function handler in React Functional Components
  20. map function not working in React
  21. Why I receive blank page? React
  22. Detect scroll direction in React js
  23. How to check for broken images in React JS
  24. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  25. How to mock React component methods with jest and enzyme
  26. Class based component vs Functional components what is the difference ( Reactjs ) [duplicate]
  27. Deep nested array of objects not rendering
  28. value of using React.forwardRef vs custom ref prop
  29. create-react-app is showing all my code in production, how to hide it?
  30. Why would we use useEffect without a dependency array?

Leave a Comment