14. Czym są komponenty kontrolowane i niekontrolowane w React i jakie są między nimi różnice?

Komponenty kontrolowane w React to komponenty formularza, których stan jest zarządzany przez React. Wartość tych komponentów jest przekazywana przez propsy, a każda zmiana wartości jest obsługiwana przez funkcję. Komponenty niekontrolowane przechowują swój stan wewnętrznie, korzystając z ref.

Komponenty kontrolowane:

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

Komponenty niekontrolowane:

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

  handleSubmit = (event) => {
    event.preventDefault();
    alert('Submitted value: ' + this.inputRef.current.value);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

Główna różnica polega na tym, że w kontrolowanych komponentach React zarządza stanem formularza, natomiast w niekontrolowanych komponentach stan jest zarządzany przez DOM.