How to fix Ref passed to useImperativeHandle must be a valid ref object in React

import { useRef, useImperativeHandle } from 'react';

// ✅ CORRECT - using useRef
function MyComponent({ ref }) {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
  }), []);

  return <input ref={inputRef} />;
}

// ❌ WRONG - string ref (deprecated)
function MyComponent({ ref }) {
  useImperativeHandle('myRef', () => ({ // Invalid!
    focus: () => {},
  }), []);

  return <input />;
}

// ❌ WRONG - callback function instead of ref object
function MyComponent({ ref }) {
  useImperativeHandle(() => {}, () => ({ // Invalid!
    focus: () => {},
  }), []);

  return <input />;
}

import { forwardRef, useImperativeHandle, useRef } from 'react';

// ✅ CORRECT - using forwardRef (React 18 and earlier)
const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    scrollIntoView: () => inputRef.current.scrollIntoView(),
  }), []);

  return <input ref={inputRef} {...props} />;
});

// Parent component usage
function Parent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current?.focus();
  };

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>Focus input</button>
    </>
  );
}

// React 19 allows ref as regular prop (no forwardRef needed)
// function MyInput({ ref, ...props }) {
//   useImperativeHandle(ref, () => ({ ... }), []);
//   return <input {...props} />;
// }

// ❌ Problematic in React Native 0.78+
import { useRef } from 'react';
import { BottomSheet } from '@gorhom/bottom-sheet';

function MyComponent() {
  // This can become false instead of a ref object
  const sheetRef = useRef<BottomSheet>(null);

  useImperativeHandle(sheetRef, () => ({ // Error: ref is false!
    snapToIndex: (index: number) => {},
  }), []);

  return <BottomSheet ref={sheetRef} />;
}

// ✅ Solution: Remove TypeScript generic or use different approach
function MyComponent() {
  const sheetRef = useRef(null); // No generic

  useImperativeHandle(sheetRef, () => ({
    snapToIndex: (index: number) => {
      // Call methods on the actual ref
      sheetRef.current?.snapToIndex(index);
    },
  }), []);

  return <BottomSheet ref={sheetRef} />;
}

// ✅ CORRECT parent usage
function Parent() {
  const childRef = useRef(null); // Create ref with useRef

  useEffect(() => {
    // Can call methods exposed by child
    childRef.current?.someMethod();
  }, []);

  return <ChildComponent ref={childRef} />;
}

// ❌ WRONG - not creating a ref
function Parent() {
  return <ChildComponent ref={null} />; // Passing null directly
}

// ❌ WRONG - using string ref
function Parent() {
  return <ChildComponent ref="childRef" />; // String ref (deprecated)
}

// ❌ WRONG - callback ref without proper handling
function Parent() {
  const handleRef = (node) => {
    // Callback refs don't work with useImperativeHandle
  };

  return <ChildComponent ref={handleRef} />;
}

function MyComponent({ ref }) {
  console.log('Ref type:', typeof ref);
  console.log('Ref value:', ref);
  console.log('Ref has current property?', ref && 'current' in ref);

  useImperativeHandle(ref, () => ({
    focus: () => {},
  }), []);

  return <div />;
}

// Or add a useEffect to check ref after mount
function MyComponent({ ref }) {
  useEffect(() => {
    console.log('Ref after mount:', ref);
    console.log('Ref.current:', ref?.current);
  }, [ref]);

  useImperativeHandle(ref, () => ({
    focus: () => {},
  }), []);

  return <div />;
}

# Check for duplicate React installations
npm ls react
npm ls react-dom

# If multiple versions exist, deduplicate
npm dedupe

# Or add resolutions/overrides in package.json
{
  "overrides": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      react: path.resolve(__dirname, 'node_modules/react'),
      'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
    }
  }
};

function MyInput({ onRef }) {
  const inputRef = useRef(null);

  useEffect(() => {
    onRef?.({
      focus: () => inputRef.current.focus(),
    });
  }, [onRef]);

  return <input ref={inputRef} />;
}

// Parent usage
function Parent() {
  const [inputApi, setInputApi] = useState(null);

  useEffect(() => {
    inputApi?.focus();
  }, [inputApi]);

  return <MyInput onRef={setInputApi} />;
}

const InputContext = createContext(null);

function MyInput({ children }) {
  const inputRef = useRef(null);
  const api = useMemo(() => ({
    focus: () => inputRef.current.focus(),
  }), []);

  return (
    <InputContext.Provider value={api}>
      <input ref={inputRef} />
      {children}
    </InputContext.Provider>
  );
}

// Child can consume context
function FocusButton() {
  const inputApi = useContext(InputContext);
  return <button onClick={() => inputApi?.focus()}>Focus</button>;
}