18. Jak działają refy w React i jak z nich korzystać w komponentach funkcyjnych?

Refy w React pozwalają na bezpośredni dostęp do elementów DOM lub instancji komponentów. Refy mogą być używane do zarządzania fokusem, wybierania tekstu, wywoływania animacji lub integracji z bibliotekami zewnętrznymi.

Użycie ref w komponentach klasowych:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

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

  render() {
    return <input ref={this.myRef} />;
  }
}

Użycie ref w komponentach funkcyjnych za pomocą hooka useRef:

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

function MyComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    myRef.current.focus();
  }, []);

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

Refy są przydatne, gdy musisz manipulować elementami DOM bezpośrednio lub uzyskać dostęp do wartości wejściowych w komponentach funkcyjnych.