React : Le Hook useState Expliqué | Formation Frameworks JS

React - useState : Gestion d'État Local

C'est lui qui va te permettre de mémoriser et modifier des données dans tes composants. Sans lui, ton composant est stateless (sans état).
( l'équivalent de notre variable un peu dans l'idée )

Pourquoi useState ?

Avant les Hooks (Class Components)

// ANCIEN - Class Component (verbeux et compliqué)
class CompteurOldSchool extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0, name: '' }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 })
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <input
          value={this.state.name}
          onChange={e => this.setState({ name: e.target.value })}
        />
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}

Avec useState (Composants Fonctionnels)

// MODERNE - Functional Component avec useState
import { useState } from 'react'

function CompteurModerne() {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('')

  return (
    <div>
      <p>Count: {count}</p>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

Pourquoi c'est mieux ?

Moins de code : 50% de lignes en moins
Plus lisible : pas de this.state partout
🚀 Plus simple : pas de constructor ni de bind
💪 Plus puissant : hooks customs possibles

useState - Les Bases

Syntaxe et Utilisation

import { useState } from 'react'

function ExemplesUseState() {
  // Syntaxe de base : [valeur, fonction_pour_modifier]
  const [count, setCount] = useState(0)          // Nombre
  const [name, setName] = useState('')           // String
  const [isVisible, setIsVisible] = useState(true) // Boolean
  const [items, setItems] = useState([])         // Array
  const [user, setUser] = useState({})           // Object

  return (
    <div>
      {/* Afficher la valeur */}
      <p>Count: {count}</p>
      
      {/* Modifier la valeur */}
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(0)}>Reset</button>

      {/* Input contrôlé */}
      <input
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="Votre nom..."
      />

      {/* Toggle boolean */}
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Masquer' : 'Afficher'}
      </button>
      {isVisible && <p>Je suis visible !</p>}
    </div>
  )
}