React Hooks: Why is .current null for useRef Hook?

by

Ref.current is null because the ref is not set till after the function returns and the content is rendered. The useEffect hook fires every time the value of contents of the array passed to it changes. By passing observed in the array and by passing a callback that logs observed to the console, the useEffect hook can be leveraged to accomplish your task.

  useEffect(() => {
    console.log(observed.current);
  }, [observed]);

Edit: This only works on the first render as changes to a ref do not trigger re-renders. But the general statement about useEffect still holds. If you want to observe changes to a ref of a dom element, you can use a callback as ref.

  <div 
    ref={el => { console.log(el); observed.current = el; }} // or setState(el)
    className="App"
  >

Code Sandbox

More Related Contents:

  1. How to fix missing dependency warning when using useEffect React Hook
  2. How to use `setState` callback on react hooks
  3. How to compare oldValues and newValues on React Hooks useEffect?
  4. How to use callback with useState hook in react [duplicate]
  5. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  6. In useEffect, what’s the difference between providing no dependency array and an empty one?
  7. With useEffect, how can I skip applying an effect upon the initial render?
  8. How to use throttle or debounce with React Hook?
  9. React useReducer async data fetch
  10. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  11. Set types on useState React Hook with TypeScript
  12. How to sync props to state using React hooks : setState()
  13. useNavigate() may be used only in the context of a component
  14. Testing React components that fetches data using Hooks
  15. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  16. Why React useState with functional update form is needed?
  17. React.useState does not reload state from props
  18. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  19. React: useState or useRef?
  20. How do react hooks determine the component that they are for?
  21. useReducer Action dispatched twice
  22. React Hooks – Modified state not reflecting immediately
  23. React hook rendering an extra time
  24. Field Array in React using formik
  25. What is the expected return of `useEffect` used for?
  26. ReactJS – prevState in the new useState React hook?
  27. React – Is useState ‘s setter function able to change?
  28. Which react hook to use with firestore onsnapshot?
  29. How do I window removeEventListener using React useEffect
  30. React Hook useEffect has a missing dependency: ‘list’

Leave a Comment