kaniosrn-j
10/16/2019 - 7:43 AM

Hooks

React UseEffect

  • useState - Let's you track state
  • useRef - Gives you the control you need to get to DOM elements
  • useEffect - Gives you a clean way to set things, tupically state, when components start and finish
  • Adding and removing DOM listeners
  • When functional component goes away, you can remove the DOM listener to avoid any potential resource leaks in the application.
const [checkBoxValue, setCheckBoxValue] = useState(false)

// useEffect - a.k.a component first mounts
useEffect(() => {
    console.log('in useEffect')
    return () => {
        console.log('cleanup')
    };
    // [] - An array that contains a list of dependencies for the component. If an array is empty then useEffect is only called once when the component is first mounted.
    // if you decide to call this again , you will need values in thi array that change, a.k.a the values that the rendered output is dependent on.
}, [checkBoxValue]) // if 'checkBoxValue' changes, then that causes a re-render of the component, and a function that uses useEffect is called again.

More React Hooks

  • useContext
  • useReducer
  • useCallback

ImageToggleOnMouseOver.js

ImageToggleOnScroll.js

  • useMemo

3 Commonly used React Hooks

  • useState
  • useRef
  • useEffect