Breaking News: Grepper is joining You.com. Read the official announcement!

react use effect ref current not working

myagizmaktav answered on March 2, 2023 Popularity 1/10 Helpfulness 1/10

answer react use effect ref current not working

react use effect ref current not working

Comment

When you use a simple ref and when ref value is change value it's not rendering.
so For this reason you need to memorize with callback.

// BAD EXAMPLE, SEE SOLUTION BELOW
const Component = () => {
  const ref = useRef();

  const [isMounted, toggle] = useReducer((p) => !p, true);
  const [elementRect, setElementRect] = useState();

  useEffect(() => {
    console.log(ref.current);
    setElementRect(ref.current?.getBoundingClientRect());
  }, [ref.current]);

  return (
    <>
      {isMounted && <div ref={ref}>Example</div>}
      <button onClick={toggle}>Toggle</button>
      <pre>{JSON.stringify(elementRect, null, 2)}</pre>
    </>
  );
};






// GOOD EXAMPLE
const Component = () => {
  const [isMounted, toggle] = useReducer((p) => !p, true);
  const [elementRect, setElementRect] = useState();

  const handleRect = useCallback((node) => {
    setElementRect(node?.getBoundingClientRect());
  }, []);

  return (
    <>
      {isMounted && <div ref={handleRect}>Example</div>}
      <button onClick={toggle}>Toggle</button>
      <pre>{JSON.stringify(elementRect, null, 2)}</pre>
    </>
  );
};

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript ref use-effect

Link to this answer
Share Copy Link

Contributed on Mar 02 2023

myagizmaktav

0 Answers Avg Quality 2/10

react use effect ref current not working

Contents

More Related Answers

react use effect ref current not working

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.