How to add " refs " dynamically with react hooks?

In React, dynamically managing refs primarily relies on the useRef and useEffect hooks. Typically, useRef is used to create a ref, while useEffect handles component mounting and unmounting logic. When dealing with dynamically adding refs, we can combine these two hooks to dynamically assign and manage refs based on component updates.

Step 1: Using useRef to Create a Container

First, we need to create a ref to serve as a container for storing dynamic refs. This container is typically an object or an array.

jsx
const refs = useRef([]);

Step 2: Assigning refs During Component Rendering

When rendering a list of components, you can dynamically assign a ref to each component within the render function.

jsx
{items.map((item, index) => (
  <div ref={el => refs.current[index] = el} key={item.id}>
    {item.content}
  </div>
))}

Here, we use an arrow function to store each div's ref in refs.current at the corresponding position.

Step 3: Using useEffect to Manage the Lifecycle of refs

If you need to perform operations during component mounting or unmounting, you can use useEffect. For example, you might need to perform operations after all components have loaded.

jsx
useEffect(() => {
  // Operations after all components have mounted, such as retrieving element dimensions
  console.log(refs.current); // Log all refs

  return () => {
    // Cleanup work, such as unbinding events
    refs.current = [];
  };
}, []); // Empty dependency array indicates execution only during mounting and unmounting

Example: Dynamically Creating Input Fields and Focus Management

Suppose you have an interface that allows dynamically adding input fields, and you want to automatically focus on the new input field when adding it.

jsx
function DynamicInputs() {
  const [inputs, setInputs] = useState([]);
  const inputRefs = useRef([]);

  const addInput = () => {
    setInputs(inputs => [...inputs, `Input ${inputs.length + 1}`]);
  };

  useEffect(() => {
    const lastInputIndex = inputs.length - 1;
    if (lastInputIndex >= 0) {
      inputRefs.current[lastInputIndex].focus();
    }
  }, [inputs]);

  return (
    <div>
      {inputs.map((name, index) => (
        <input
          key={index}
          ref={el => inputRefs.current[index] = el}
          placeholder={name}
        />
      ))}
      <button onClick={addInput}>Add Input</button>
    </div>
  );
}

In this example, whenever the inputs array updates (i.e., when a new input field is added), useEffect runs and focuses on the latest input field.

By doing this, we can effectively dynamically manage refs for React components, making our applications more flexible and powerful.