React Chapter 5: Hooks and Context

React Context

• React Context is a way to manage state globally, allowing for sharing state between deeply nested components more easily than with useState alone.
• Without Context, state has to be passed as "props" through each nested component, known as "prop drilling" or "prop threading", which can lead to harder-to-maintain code.

useContext Hook

• The useContext Hook is used to share data between components in React.
• Before the introduction of useContext, data was shared between components through props, which required all parent components to receive and pass along the data, even if they didn't use it.

useRef Hook

• The useRef Hook is used to access and interact with DOM elements directly.
• It can be used to store mutable values that persist between renders, which can be updated directly without causing re-renders.
• useRef returns an object called current, and when initializing useRef, the initial value is set.
• It's like doing this: const count = {current: 0}.

useReducer Hook

• The useReducer Hook is similar to the useState Hook, but allows for custom state logic.
• It's useful when keeping track of multiple pieces of state that rely on complex logic.
• The useReducer Hook accepts two arguments: the reducer function and the initialState.
• The reducer function contains custom state logic, and the initialState can be a simple value or an object.
• The useReducer Hook returns the current state and a dispatch method.
• It's an alternative to useState that allows updating the state based on the previous state and an action.

React useReducer Hook Example

• A reducer function is defined that takes the current state and an action as parameters and returns the new state based on the action.
• A component is created that initializes its state using useReducer, with the initial state being an object with a count property set to 0.
• Inside the component, the current count value is rendered, and two buttons are created to increment and decrement the count.
• When a button is clicked, an action is dispatched to the reducer, which updates the state based on the action type and returns the new state.

useCallback Hook

• The useCallback Hook is used to memoize a callback function, returning a memoized version of the callback function that only changes if one of the dependencies has changed.
• Memoization is the process of caching a value so that it does not need to be recalculated.
• The useCallback Hook is used to optimize performance by preventing unnecessary re-renders or re-computations.
• It's useful when a function is passed as a prop to child components or used in useEffect dependencies.

React useMemo Hook

• The useMemo Hook is used to improve performance by memoizing (caching) expensive computations.
• Memoization means storing the result of a function call and reusing it when the function's inputs (dependencies) haven't changed.
• The useMemo Hook only runs when one of its dependencies updates.
• It's similar to useCallback, but returns a memoized value instead of a memoized function.

React Custom Hooks

• Custom hooks in React are reusable functions that encapsulate logic and stateful behavior that can be shared across different components.
• They follow the same rules as regular hooks, such as only being called at the top level of a function component or another custom hook.
• Custom hooks can be used to manage state and logic in a component, such as a counter application.
• A custom hook can handle the state for the counter value and provide functions to increment and decrement the counter.