Using Refs

Using Refs with Class component

class Person extends Component {
	constructor(props) {
		super(props);
		this.inputElementRef = React.creatRef();
	}

	componentDidMount() {
		this.inputElementRef.current.focus();
	}

	render() {
		return (
			<input ref={this.inputElementRef} type="text"/>
		)
	}
}

Using Refs with Functional componen + TypeScriptt

export const Cockpit: React.FC<CockpitProps> = React.memo(props => {
  const toggleBtnRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    const { current } = toggleBtnRef;

    if (!current) {
      return;
    }

    current.click();
  }, []);

  return (
    <>
      <h1>React App</h1>
      <button ref={toggleBtnRef} onClick={props.onClick}>
        Switch Name
      </button>
    </>
  );
});

Using Refs with Functional componen + TypeScriptt (new and shorter)

export const Cockpit: React.FC<CockpitProps> = React.memo(props => {
  const toggleBtnRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    toggleBtnRef.current?.click()
  }, []);

  return (
    <>
      <button ref={toggleBtnRef} onClick={props.onClick}>
        Switch Name
      </button>
    </>
  );
});