useRef techniques and component interaction

I. Core Usage: Accessing Underlying Components

useRef is a React Hook used to create responsive references, with the core characteristic of not re-rendering, meaning its value remains constant. It is commonly used to access DOM elements, component instances, or state variables, enabling direct interaction with underlying components.

Creating References

const ref = useRef(null);

Access reference values through ref.current to directly manipulate the DOM or component instances. For example:

const element = useRef(null);
element.current = document.getElementById('myElement');

Underlying Interaction
The value of a useRef persists even after the component unmounts, allowing direct manipulation of underlying components. For instance:

useEffect(() => {
  const el = ref.current;
  if (el) {
    el.style.color = 'red';
  }
  return () => {
    // Cleanup resources
  };
}, [ref]);

This mechanism avoids frequent re-renders, making it suitable for scenarios requiring long-term state retention.

II. Advanced Techniques: Optimizing Performance and Controlling Flow

1. Interaction with React Rendering Mechanism
The current property of a ref points directly to the React rendering tree, enabling fine-grained control over underlying components. For example:

useEffect(() => {
  const el = ref.current;
  if (el) {
    el.addEventListener('click', handleEvent);
  }
  return () => {
    el.removeEventListener('click', handleEvent);
  };
}, [ref]);

Through refs, developers can listen for DOM events, modify styles, or trigger rendering logic.

2. Usage in Combination with useEffect
useRef can be paired with useEffect to implement more complex control flows. For example:

const count = useRef(0);
useEffect(() => {
  const el = ref.current;
  if (el) {
    el.textContent = Date.now();
  }
}, [ref]);

Changes in the value of a ref can trigger side effects, enabling dynamic updates.

III. Precautions: Avoiding Common Pitfalls

1. Do Not Directly Modify Ref Values
Values associated with useRef are immutable; direct modification leads to unexpected behavior:

const ref = useRef(0);
ref.current = 1; // Correct usage
// Note: The following line is incorrect because the initial value cannot be changed directly.
// ref.current = 2; // Error (values are immutable)

2. Cleanup on Component Unmounting
Ensure resources are cleaned up when a component unmounts to prevent memory leaks:

useEffect(() => {
  const el = ref.current;
  if (el) {
    el.addEventListener('click', handleEvent);
  }
  return () => {
    el.removeEventListener('click', handleEvent);
  };
}, [ref]);

3. Differences from useState
Values in useRef do not change with state updates, making them ideal for values that need to persist over time, whereas values managed by useState update as the state changes.

IV. Summary

useRef is a core tool in React Hooks for interacting with underlying components. By directly accessing the DOM or component instances, developers can efficiently control rendering logic. Its advantages lie in performance optimization and persistent state management; however, it is important to avoid common mistakes such as violating immutability rules, neglecting resource cleanup, and misusing its interaction with useEffect. Proper application of useRef enhances both the flexibility and performance of components.