ReactJS is a JavaScript library used for building reusable components.
React is a library for building a composable user interface. It encourages the creation of reusable UI components, which present data that change over time. React abstracts away the DOM from you, offering a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native. React implements one-way reactive data flow, which reduces the boilerplate and is easier to reason about than traditional data binding.
Let’s move onto React Hook. This page describes the APIs for the built-in Hooks to React.
- Basic Hooks
- useState
- useEffect
- useContext
- Additional Hooks
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
Let's detail overview of the above table
Basic Hooks
1 useState
const [state, setState] = useState(initialState);
During the initial render, the returned state (state) is the same as the value passed as the first argument (initialState). The setState function is used to update the state. It accepts a new state value and enqueues a re-render of the component.
setState(newState);
During subsequent re-renders, the first value returned by useState will always be the most recent state after applying updates.
2 useEffect
useEffect(didUpdate);
Accepts a function that contains imperative, possibly effectful code. The function passed to useEffect will run after the render is committed to the screen. By default, effects run after every completed render, but you can choose to fire them when a certain value changed.
3 useContext
const value = useContext(MyContext);
Accepts a context object (the value returned from React.createContext) and returns the current context value for that context. The current context value is determined by the value prop of the nearest above the calling component in the tree. When the nearest above the component updates, this Hook will trigger a rerender with the latest context value passed to that MyContext provider. Even if an ancestor uses React. memo or shouldComponentUpdate, a rerender will still happen to start at the component itself using useContext.
Don’t forget that the argument to useContext must be the context object itself:
- Correct: useContext(MyContext)
- Incorrect: useContext(MyContext.Consumer)
- Incorrect: useContext(MyContext.Provider)
A component calling useContext will always re-render when the context value changes. If re-rendering the component is expensive, you can optimize it by using memoization.
Additional Hooks
1 useReducer
const [state, dispatch] = useReducer(reducer, initialArg,
An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.) useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.
2 useCallback
const memorizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).
3 useMemo
const memorizedValue = useMemo( () => ComputeExpensiveValue(a, b),
useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.
4 useRef
const refContainer = useRef(initialValue);
useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
5 useImperativeHandle
useImperativeHandle( ref, createHandle, [deps])
useImperativeHandle customizes the instance value that is exposed to parent components when using ref. As always, imperative code using refs should be avoided in most cases. useImperativeHandle should be used with forwardRef:
6 useLayoutEffect
The signature is identical to useEffect, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint. Prefer the standard useEffect when possible to avoid blocking visual updates.
7 useDebugValue
useDebugValue(value);
useDebugValue can be used to display a label for custom hooks in React DevTools.
Conclusion
React is a powerful javascript framework understanding how the hooks are used and when it’s initialized.