[Suggestion]: Documentation for `useRef` should tell us how to deal with multiple refs on a single element

Bắt đầu với trang tham chiếu useRef hiện tại tại https://react.dev/reference/react/useRef và xem xét cách trang này đề cập đến refs trong quá trình render. Điều tra các mối lo ngại về multiple-ref và eslint-plugin-react-compiler được mô tả trong issue, sau đó cập nhật tài liệu để làm rõ cách tiếp cận được hỗ trợ và hành vi dự kiến của compiler.

Summary

Sometimes you need to add more than one ref to a single element. For example:

• When using forwardRef you need to pass the forwarded ref to whatever element, but you also need your own ref attached to the same element.
• When using useController of react-hook-form, you get a ref you need to pass to the input element for focus management, but you also need your own ref for doing other things with that same input element.

This is an issue that is not even mentioned on the current documentation of useRef. I've been using gregberge/react-merge-refs to deal with this, but after I added the recommended eslint-plugin-react-compiler, this method now generates a warning:

Ref values (the current property) may not be accessed during render.

If you're not allowed to access ref values during render to merge them, then how are you supposed to attach multiple refs to a single element now?

The documentation needs to tell us how to do this properly, and in a way that doesn't break the compiler or generate warnings in your eslint plugins.

Page

https://react.dev/reference/react/useRef

Details

Example component needing this:

export default forwardRef(
  function BaseCheckbox(
    { label, indeterminate = false, onChange, onCheckedChange, ...props },
    ref
  ) {
    const inputId = useId();
    const inputRef = useRef(null);

    useLayoutEffect(() => {
      if (inputRef.current)
        inputRef.current.indeterminate = indeterminate;
    }, [indeterminate]);

    return (
      <div className="checkbox">
        <input
          type="checkbox"
          id={inputId}
          /**
           * Here we have two refs we need to attach to this input, but there's no
           * documented way to do that and the undocumented way is not allowed
           * according to the new rules from `eslint-plugin-react-compiler`.
           */ 
          ref={mergeRefs(inputRef, ref)}
          onChange={(e) => {
            onChange?.(e);
            onCheckedChange?.(e.currentTarget.checked);
          }}
          aria-checked={
            indeterminate ? 'mixed' : props.checked ? 'true' : 'false'
          }
          {...props}
        />
        <label htmlFor={inputId}>
          {label}
        </label>
      </div>
    );
  }
);