How do I use useEffect with refs in React?

How do I use useEffect with refs in React?

You can use the useEffect hook to perform side effects in function components. When working with refs, you can access the current value of a ref inside the useEffect callback.

Can you give me an example of that?

Sure! Here's a simple example:

import React, { useEffect, useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    // Focus the input element when the component mounts
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" />;
}

What if I want to update the ref value based on a prop change?

You can add the prop as a dependency in the useEffect array. This way, the effect will run whenever the prop changes.

Can you show me that in code?

Absolutely! Here's how you can do it:

import React, { useEffect, useRef } from 'react';

function MyComponent({ someProp }) {
  const inputRef = useRef(null);

  useEffect(() => {
    // Update the ref value based on someProp
    inputRef.current.value = someProp;
  }, [someProp]);

  return <input ref={inputRef} type="text" />;
}