How to fix Cannot read property "current" of null in React

function ParentComponent() {
  const childRef = useRef(null);

  // ❌ Wrong: Accessing during render
  // console.log(childRef.current); // null!

  // ✅ Correct: Access in useEffect
  useEffect(() => {
    if (childRef.current) {
      console.log(childRef.current); // Now available
      childRef.current.focus();
    }
  }, []);

  // ✅ Correct: Access in event handler
  const handleClick = () => {
    if (childRef.current) {
      childRef.current.scrollIntoView();
    }
  };

  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Scroll to child</button>
    </>
  );
}

import { forwardRef } from 'react';

// ❌ Wrong: Not forwarding ref
function MyInput(props) {
  return <input {...props} />;
}

// ✅ Correct: Forwarding ref to DOM element
const MyInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

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

  useEffect(() => {
    inputRef.current?.focus(); // Safe access with optional chaining
  }, []);

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

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

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
    scrollIntoView: () => {
      inputRef.current?.scrollIntoView({ behavior: 'smooth' });
    },
    getValue: () => {
      return inputRef.current?.value || '';
    }
  }), []); // Empty dependency array

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

// Usage
function Parent() {
  const customRef = useRef(null);

  const handleAction = () => {
    customRef.current?.focus(); // Call exposed method
    console.log(customRef.current?.getValue());
  };

  return (
    <>
      <CustomInput ref={customRef} />
      <button onClick={handleAction}>Focus Input</button>
    </>
  );
}

function Parent() {
  const [show, setShow] = useState(true);
  const childRef = useRef(null);

  const handleInteraction = () => {
    // ❌ Wrong: Ref might be null if component unmounted
    // childRef.current.doSomething();

    // ✅ Correct: Check before using
    if (childRef.current) {
      childRef.current.doSomething();
    }
  };

  useEffect(() => {
    // Only run effect if component is mounted
    if (show && childRef.current) {
      childRef.current.initialize();
    }

    // Cleanup when unmounting
    return () => {
      if (childRef.current) {
        childRef.current.cleanup?.();
      }
    };
  }, [show]);

  return (
    <>
      {show && <Child ref={childRef} />}
      <button onClick={() => setShow(!show)}>Toggle</button>
      <button onClick={handleInteraction}>Interact</button>
    </>
  );
}

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

const ComponentWithFallback = forwardRef((props, forwardedRef) => {
  // Create fallback ref using lazy initialization
  const [fallbackRef] = useState(() =>
    forwardedRef || useRef(null)
  );

  const ref = forwardedRef || fallbackRef;

  // Use ref normally
  useEffect(() => {
    if (ref.current) {
      ref.current.focus();
    }
  }, [ref]);

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

// Alternative: Check ref type
const SafeComponent = forwardRef((props, forwardedRef) => {
  const localRef = useRef(null);

  // Use forwarded ref if valid, otherwise use local
  const activeRef =
    forwardedRef && typeof forwardedRef === 'object' && 'current' in forwardedRef
      ? forwardedRef
      : localRef;

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