React Hooks

  1. Only call Hooks at the top level
  2. Only use Hooks in functional components
  3. You cannot call Hooks from regular JavaScript functions they must be React functions.
  4. Node version 6 or above
  5. NPM version 5.2 or above
  6. Import all appropriate hooks you plan to use at the top of a component.
import { useState } from 'react';
  • useState
  • useEffect
  • useContext
  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue
[name, setName] = useState("programmer") 
//name in state will default to programmer
const eventToChangeName = () => {
setName("Adam")
}
//name will be Adam after function is called
useEffect(() => {
eventToChangeName()
}, [])
cont pets = {
bobo: 'Cat' ,
lucy: 'Dog'
}
const PetContext = createContext(pets);function App(props) {
return(
<PetContext.Provider value={pets.bobo}>
<FindTheAnimal /> </PetContext.Provider>
)
}
function FindTheAnimal = () => {
const animal = useContext(PetContext)
return (
<p> animal </p>
)
}
function App() {   const myButton = useRef(null)   const click = () => myButton.current.click()   return(
<button ref={myButton}> </button>
)
}
const [counter, setCounter] = useState(2)const expensiveCount = useMemo(() => {
return count ** 2
}, count)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store