How to fix Cannot access ref.current in forwardRef before component renders in React

import React, { forwardRef, useEffect } from 'react';

const MyInput = forwardRef<HTMLInputElement>((props, ref) => {
  // ❌ WRONG: Accessing ref.current during render
  // console.log(ref.current); // Error!

  useEffect(() => {
    // ✅ CORRECT: Access ref.current after render
    if (ref && typeof ref !== 'function' && ref.current) {
      console.log('Input element:', ref.current);
      ref.current.focus(); // Safe to call DOM methods
    }
  }, [ref]);

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

import React, { forwardRef, useEffect } from 'react';

const CustomComponent = forwardRef<HTMLDivElement>((props, ref) => {
  useEffect(() => {
    // Check if ref is an object with current property
    if (ref && typeof ref !== 'function' && ref.current) {
      // Safe to access ref.current here
      const element = ref.current;
      element.style.backgroundColor = 'lightblue';
    }
  }, [ref]);

  return <div ref={ref}>Content</div>;
});

import React, { forwardRef, useLayoutEffect, useState } from 'react';

const MeasuredComponent = forwardRef<HTMLDivElement>((props, ref) => {
  const [height, setHeight] = useState(0);

  useLayoutEffect(() => {
    if (ref && typeof ref !== 'function' && ref.current) {
      // Measure DOM before browser paints
      const rect = ref.current.getBoundingClientRect();
      setHeight(rect.height);
    }
  }, [ref]);

  return (
    <div ref={ref}>
      Height: {height}px
      {props.children}
    </div>
  );
});

import React, { forwardRef, useEffect } from 'react';

interface Props {
  show: boolean;
}

const ConditionalInput = forwardRef<HTMLInputElement, Props>(
  ({ show }, ref) => {
    useEffect(() => {
      if (ref && typeof ref !== 'function' && ref.current) {
        ref.current.focus();
      }
      // ref.current will be null if show is false
    }, [ref, show]); // Include show in dependencies

    // Only render input when show is true
    if (!show) return null;

    return <input ref={ref} placeholder="Type here..." />;
  }
);

import React, { forwardRef, useCallback } from 'react';

const SmartInput = forwardRef<HTMLInputElement>((props, forwardedRef) => {
  const handleRef = useCallback(
    (node: HTMLInputElement | null) => {
      // Called when element mounts
      if (node) {
        console.log('Element mounted:', node);
        node.focus();
      }

      // Forward the ref to parent
      if (typeof forwardedRef === 'function') {
        forwardedRef(node);
      } else if (forwardedRef) {
        forwardedRef.current = node;
      }
    },
    [forwardedRef]
  );

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