React hooks

Wkrótce opisy i więcej hooków.

useState

  const [counter, setCounter] = useState(0)

  // const handleOnClick = () => setCounter(counter + 1)
  const handleOnClick = () => setCounter(prevValue => prevValue + 1)

  return (
    <div>
      <p>{counter}</p>
      <button onClick={handleOnClick}>add</button>
    </div>
  )

useEffect

   useEffect(() => {
    window.addEventListener('mousemove', handleMouseMove)
    return () => {
      window.removeEventListener('mousemove', handleMouseMove)
    }
  }, [rerendercounter])

useRef

   const textInput = useRef() // każdy rerender zwraca tę samą referencję
   const numberRef = createRef() // tylko do przerendowania

   return (
    <div>
      <input ref={textInput} type="text" />
      <input ref={numberRef} type="number" />
 //
    </div>
  )

Odnośniki

Youtube