React helps developers to update the DOM based on the props/states, so that we don’t have to manually update DOM elements
Hooks is the way to manage the states. Developers can extract stateful logic from a component so it can be tested independently and reused. useEffect: manage side effects
Some components which you don’t want to re-render according to its state/value’s change e.g. React Ref
There are a few good use cases for refs:
functional update. e.g. setNews(_news => [..._news, ...data])
Use useRef
Use form element + e.preventDefault()
Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.
Don’t call Hooks from regular JavaScript functions. Instead, you can:
✅ Call Hooks from React function components. ✅ Call Hooks from custom Hooks (we’ll learn about them on the next page). By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
✅ SSR: the server generates the HTML content for a web page and sends the fully rendered page to the client’s browser. ❌ CSR: 2-round trips are needed to download the whole page with content
✅ SSR: Fast initial page load, 1 round trip is needed to receive a fully rendered page from server ✅ CSR: Slow initial page load, but faster loading time on subsequent page/components update
✅ SSR: SEO-friendly because search engines can easily crawl and index the content since it’s present in the initial HTML ❌ CSR: challenging for search engines
❌ SSR: Developers need to consider handling data either on server side or on client side, which add complexity to the project ✅ CSR: Everything happens on client side, easier to manage
React Context is part of the React library, so you don’t need to install any additional packages. Local State Management:
It’s well-suited for managing local component state or sharing data between components that are deeply nested in the component tree.
The Context API provides a simple way to pass data through the component tree without having to pass props manually at every level.
If your application is small to medium-sized and doesn’t require complex state management, React Context might be sufficient without the need for additional libraries.
React Context doesn’t inherently provide a global store like Redux. Each context instance is independent and usually used for a specific part of the component tree.
Redux provides a global state management solution. It’s suitable for managing complex state across the entire application.
Redux follows a strict unidirectional data flow, making it easier to predict and debug state changes in large applications.
Redux supports middleware, allowing you to add custom functionality such as logging, async operations, etc., to the state management process.
Redux DevTools offer powerful debugging capabilities, allowing you to inspect and time-travel through state changes.
Redux supports middleware, allowing you to add custom functionality such as logging, async operations, etc., to the state management process.
Use React Context when dealing with simple to moderate state management needs within a localized part of your component tree. When you prefer a simpler API and don’t want the overhead of additional libraries.
Use Redux when you have a large and complex application with shared state that needs to be accessed by multiple components. When you need a single, predictable state container with a well-defined structure. If you need features like time-travel debugging and middleware support.