hook useState

useState hook sprendžia problema, dėl reactyvumo

• useState(parametras) parametras gali buti bet kas, objektas, funkcija ir t.t. Nurodomas default parametras.
• grąžina pirmu parametru value - reikšme
• grąžina antru parametru setValue mechanizmą pakeisti tai reikšmei

const [value, setValue] = useState(0)

Inputo kontrolė, naudojant onCahnge handler

onChange={event => {
  setValue(event.currentTarget.value)
}}

const [count, setCount] = useState(0)

// then in a click event handler or something:
setCount (count + 1)

// but this is the exact same thing:
setCount (previousCount => previousCount + 1)

setCount (previousCount => previousCount + 1) - leidžia inkapsuliuoti ir leidžia išventi count pasikeitimo nelaiku

Pavyzdys

Principai

State laikome taip

[
  'X', '0', 'X',
  'X', '0', '0',
  'X', 'X', '0'
]

setCount(currentCount => {
  return currentCount + 1
})

const newSquares = squares.with (index, 'X')

Realizacija

const defaultState = Array(9).fill(null)
...
const [squares, setSquares] = useState(defaultState)
...
setSquares(previousSquares => {
  const newSquares = previousSquares.with(index, nextValue)
  return newSquares
})
...
function restart() {
  setSquares(defaultState)
}
function renderSquare (i: number) {
  return (
    <button className="square" onClick={() => selectSquare(i)}>
      {squares[i]}
    </button>
  )
}

Pavyzdys su localState

const [squares, set Squares] = useState<Squares>(() => {
  const squares = localStorage.getItem(key)
  if (!squares) return defaultState
  try {
    return JSON.parse(squares)
  } catch {
    return defaultState
  }
})

useEffect (() => {
  localStorage.setItem(key, JSON.stringify(squares))
} [squares])

State optimizavimo pvz

const [count, setCount] = useState(0)
...
setCount(0) // <-- will not trigger a rerender if the state is still 0

const [state, setState] useState({ count: 0 })
...
setState({ count: 0 }) // <-- will trigger a rerender
setState(previousState => ({
  count: previousState.count,
})) // <-- will trigger a rerender
setState(previousState => previousState) // <-- will not trigger a rerender

• if (prevParams.toString() === searchParams.toString()) { patikriname ar pasikeitė, kad išvengti renderinimo

function setSearchParams(...args: Parameters<typeof setGlobalSearchParams>){
  console.log('setting search params')
  const searchParams = setGlobalSearchParams(...args)
  setSearchParamsState(prevParams => {  
    if (prevParams.toString() === searchParams.toString()) {
      return prevParams
    }
    return searchParams
  })
  return searchParams
}