Loading lesson path
React
Use hooks to model state, effects, refs, reducers, and shared app behavior.
Hooks allow functions to have access to state and other React features without using classes. They provide a more direct API to React concepts like props, state, context, refs, and lifecycle. What is…
The React useState Hook allows us to track state in a function component. State generally refers to data or properties that need to be tracking in an application. Import useState To use the useState…
The useEffect Hook allows you to perform side effects in your components. Some examples of side effects are: fetching data, directly updating the DOM, and timers. useEffect accepts two arguments. The…
React Context React Context is a way to manage state globally. It can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone. The…
The useRef Hook allows you to persist values between renders. It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly. Do…
The useReducer Hook is similar to the useState Hook. It allows for custom state logic. If you find yourself keeping track of multiple pieces of state that rely on complex logic, useReducer may be use…
The useCallback Hook is used to memoize a callback function. Memoizing a function means caching the result of a function so that it does not need to be recalculated. The useCallback function only re-…
The React useMemo Hook returns a memoized value. Think of memoization as caching a value so that it does not need to be recalculated. The useMemo Hook only runs when one of its dependencies update. T…
You can make your own Hooks! When you have components that can be used by multiple components, we can extract that component into a custom Hook. Custom Hooks start with "use". Example: useFetch. Buil…