dygresje.info / IT / JavaScript

Spis treści

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