DEV Community: Khushboo Tolat Modi

React Lifecycle Methods

Khushboo Tolat Modi — Wed, 04 Sep 2024 19:57:09 +0000

In React, lifecycle methods are special methods that get called at different stages of a component's existence. They allow you to control what happens to a component at various stages like mounting, updating, or unmounting. With the introduction of React Hooks in React 16.8, functional components can also manage their own side effects, but lifecycle methods are still important in class components. Here’s a detailed look at the most commonly used lifecycle methods:

Mounting

The mounting phase in React refers to the process where a component is created and inserted into the DOM. This phase involves a series of lifecycle methods called in a specific order, allowing developers to initialize and configure the component before it is rendered. Here’s a detailed breakdown of each method in the mounting phase in order of their execution:

1. `constructor(props)`

Purpose:

The constructor is the first method called when a component instance is created. It is used to initialize the component’s state and bind event handlers.
In the constructor, you can set the initial state by directly assigning an object to this.state. You also typically pass props to the base Component class using super(props) to ensure the component is properly initialized.

Example:

Notes:

The constructor is only called once during the component's lifecycle.
You should avoid side effects in the constructor (e.g., network requests or subscriptions) and reserve those tasks for componentDidMount.

2. `static getDerivedStateFromProps(props, state)`

Purpose:

This is a static method that is called right before rendering, both during the initial mount and during updates. It allows the component to update its state based on changes in props.
It returns an object to update the state or null if no state updates are needed.

Example:

Notes:

This method is rarely needed, as React's data flow is usually handled by passing props directly.
It's used in special cases where state needs to be derived from props.

3. `render()`

Purpose:

The render method is the only required lifecycle method in a class component. It determines what the UI of the component should look like by returning React elements.
This method is pure, meaning it should not modify the component state or interact with the DOM.

Example:

Notes:

The render method can return a variety of values, including JSX elements, arrays, fragments, portals, strings, numbers, or null.
Since render is pure, avoid side effects or state mutations within this method.

4. `componentDidMount()`

Purpose:

This method is invoked immediately after a component is mounted (i.e., inserted into the DOM). It’s the perfect place to run side effects, such as fetching data from an API, setting up subscriptions, or initializing third-party libraries.
componentDidMount is the last method called in the mounting phase, making it ideal for any DOM manipulations.

Example:

Notes:

Since componentDidMount is called after the initial render, updating the state within it will trigger a re-render. This is common when fetching data or interacting with the DOM.
If you set up subscriptions or event listeners here, remember to clean them up in componentWillUnmount to avoid memory leaks.

Updating

The updating phase in React refers to the process when a component is re-rendered due to changes in its state or props. During this phase, several lifecycle methods are invoked in a specific order, allowing you to control how your component reacts to these changes. Here's a detailed look at each method involved in the updating phase in order of their execution:

1. `static getDerivedStateFromProps(props, state)`

Purpose:

This static method is called right before rendering the component when new props or state are received. It allows the component to update its internal state based on changes in props.
It returns an object that updates the state or null if no updates are needed.

Example:

Notes:

This method is useful in scenarios where the state needs to be synchronized with props.
It is called on every update, so avoid heavy computations here.

2. `shouldComponentUpdate(nextProps, nextState)`

Purpose:

This method is called before rendering when new props or state are received. It allows you to control whether the component should update or not. Returning true (default) means the component will update; returning false means it will not.
It is mainly used to optimize performance by preventing unnecessary re-renders.

Example:

Notes:

This method is not called during the initial render or when forceUpdate() is used.
Avoid complex logic here, as it can lead to performance issues or bugs if not handled carefully.

3. `render()`

Purpose:

The render method is called to produce the next version of the virtual DOM based on the component's current state and props.
It’s pure, meaning it should not modify component state or interact with the DOM.

Example:

Notes:

Since render is pure, any state or prop changes should be reflected in the returned JSX.
Avoid side effects (like modifying the DOM directly or making network requests) within render.

4. `getSnapshotBeforeUpdate(prevProps, prevState)`

Purpose:

This method is called right before the changes from the virtual DOM are actually reflected in the real DOM. It allows you to capture some information (like the current scroll position) before it is potentially changed.
The value returned from this method is passed as a third argument to componentDidUpdate.

Example:

Notes:

This method is particularly useful for capturing information about the DOM before it changes, such as maintaining scroll position during updates.
It is often used together with componentDidUpdate.

5. `componentDidUpdate(prevProps, prevState, snapshot)`

Purpose:

This method is invoked immediately after updating occurs. It’s a good place to perform any DOM operations, network requests, or other side effects based on the update.
It receives the previous props and state, as well as the value returned by getSnapshotBeforeUpdate (if any).

Example:

Notes:

This method is useful for performing operations that need to happen after the DOM has been updated.
Avoid setting state within componentDidUpdate unless it's wrapped in a condition to prevent an infinite loop of updates.

Unmounting

The unmounting phase in React occurs when a component is being removed from the DOM. This phase has a single lifecycle method that allows you to perform any necessary cleanup tasks before the component is destroyed. Proper handling of this phase is crucial to prevent memory leaks, dangling event listeners, or other side effects that could persist after the component is removed.

1. `componentWillUnmount()`

Purpose:
componentWillUnmount is invoked immediately before a component is unmounted and destroyed. This method is used for cleanup activities, such as:

Canceling network requests.
Clearing timers or intervals.
Removing event listeners.
Cleaning up subscriptions (e.g., from Redux, WebSockets, etc.).
Invalidating or cleaning up any side effects created in componentDidMount or other lifecycle methods.

Example:

In this example:

A timer is started when the component mounts (componentDidMount).
The timer is cleared in componentWillUnmount to ensure it doesn’t continue running after the component is removed from the DOM. This is crucial to prevent potential memory leaks or unexpected behavior.

Key Considerations:

Preventing Memory Leaks: If you set up event listeners or intervals in componentDidMount, you must remove them in componentWillUnmount to prevent memory leaks. Failing to do so could lead to your application consuming more memory over time or behaving unexpectedly.
Cleaning Up Subscriptions: If your component subscribes to external data sources (like Redux stores, Firebase, WebSocket connections, etc.), you should unsubscribe in componentWillUnmount. This ensures that your component no longer reacts to updates from those sources after it has been removed.
No setState: Since the component is about to be destroyed, you should not call setState within componentWillUnmount. Doing so will have no effect because the component will not re-render.
Asynchronous Cleanup: If your cleanup involves asynchronous operations (like canceling a network request), ensure that those operations are properly handled to avoid race conditions or trying to interact with a component that no longer exists.

Common Use Cases:

Timers and Intervals: Clearing setTimeout or setInterval instances to avoid them running after the component is unmounted.
Event Listeners: Removing event listeners attached to the window, document, or any DOM element to prevent them from firing after the component is unmounted.
Subscriptions: Unsubscribing from data streams or external services (e.g., WebSockets, Firebase, Redux stores).
Network Requests: Cancelling ongoing network requests if the component is unmounted before the request completes. This can be done using libraries like Axios, which provide cancellation tokens.

Best Practices:

Always clean up side effects in componentWillUnmount if they were set up in componentDidMount or any other lifecycle method.
Be mindful of asynchronous operations to ensure they don’t inadvertently interact with a component that has been unmounted.
Avoid any logic that assumes the component will continue to exist after componentWillUnmount is called.

Error Handling

The error handling phase in React is designed to catch and handle errors that occur during rendering, in lifecycle methods, and in constructors of the whole tree below a component. This is accomplished using special lifecycle methods in class components known as error boundaries.

Error Boundaries Overview

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the entire application. This makes the app more resilient by preventing errors from propagating to the root of the application.

1. `static getDerivedStateFromError(error)`

Purpose:

This static method is called when an error is thrown during the rendering phase, in a lifecycle method, or in a constructor of any child component.
It allows you to update the state so that the next render will show a fallback UI.

Usage:

The method receives the error that was thrown as a parameter and returns an object that updates the component's state.
By setting the state in this method, you can render a fallback UI that informs the user something went wrong.

Example:

Notes:

This method allows you to control what is rendered when an error occurs. For example, you might choose to render a generic error message or a custom error component.
It’s typically used to set an error state that can trigger the rendering of a fallback UI.

2. `componentDidCatch(error, info)`

Purpose:

This method is called after an error has been thrown by a descendant component. It’s used for logging error information or performing side effects like reporting the error to an error tracking service.
Unlike getDerivedStateFromError, this method can be used to capture additional details about the error and the component stack trace where the error occurred.

Usage:
The method receives two arguments:

error: The error that was thrown.
info: An object with a componentStack property that contains a string with information about which component threw the error.

Example:

Notes:

componentDidCatch is particularly useful for logging errors or sending them to a monitoring service (e.g., Sentry, LogRocket).
While getDerivedStateFromError helps with rendering a fallback UI, componentDidCatch focuses on capturing and logging error details.

How to Use Error Boundaries

Wrapping Components: Error boundaries can be used to wrap any component or set of components. This can be done globally (e.g., around the entire application) or more selectively (e.g., around components that are more prone to errors).

Example:

In this example, ErrorBoundary wraps MyComponent. If MyComponent or any of its children throw an error, the ErrorBoundary will catch it and display the fallback UI.

Key Considerations:

Error Boundaries Catch Errors in the Following Scenarios:

During rendering.
In lifecycle methods (including those in class components).
In constructors of child components.

Error Boundaries Do Not Catch Errors in the Following Scenarios:

Event handlers (errors can be caught using try/catch blocks within the event handler itself).
Asynchronous code (e.g., setTimeout, requestAnimationFrame).
Server-side rendering.
Errors thrown in the error boundary itself (though you can nest error boundaries to catch such errors).

Best Practices:

Use error boundaries to prevent the entire app from crashing due to small, isolated errors.
Place error boundaries around potentially error-prone parts of your app, such as third-party components or components handling complex logic.
Ensure that error boundaries provide a user-friendly fallback UI, informing the user that something went wrong.

Understanding these lifecycle methods will help you better manage state, props, and side effects in React components.

Lifecycle methods in Functional Component

In functional components, React’s useEffect hook is the primary way to handle side effects and lifecycle methods. The useEffect hook can replicate behaviors similar to class component lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount. Here's a detailed breakdown of how useEffect works and how it relates to these lifecycle methods.

Basic Syntax

First Argument (effect): A function where you place your side effect logic. This function can return a cleanup function to clean up resources when the component unmounts or before the effect is re-run.
Second Argument (dependencies): An array of dependencies that determine when the effect should be re-run. If any of the values in this array change, the effect is triggered again.

`useEffect` as `componentDidMount`

To replicate the behavior of componentDidMount (which runs once after the component is mounted), you can use useEffect with an empty dependency array [].

Example:

Behavior: The effect runs only once after the initial render, similar to componentDidMount in class components.

`useEffect` as `componentDidUpdate`

To mimic componentDidUpdate, you use useEffect with dependencies. The effect will run whenever any of the dependencies change.

Example:

Behavior: The effect runs after each render where the dependencies (count or someProp) change, just like componentDidUpdate.

`useEffect` as `componentWillUnmount`

To replicate componentWillUnmount, you return a cleanup function from useEffect. This cleanup function will be executed when the component unmounts or before the effect re-runs.

Example:

Behavior: The cleanup function runs when the component is about to unmount, similar to componentWillUnmount.

Handling All Three Lifecycle Methods in One `useEffect`

In many cases, a single useEffect can handle the component's mounting, updating, and unmounting phases. Here's an example that demonstrates this:

Example:

Mounting: The effect runs once on the initial render.
Updating: The effect runs whenever someProp changes.
Unmounting: The cleanup function runs when the component unmounts or before the effect re-runs due to a dependency change.

Controlling the Execution Frequency of `useEffect`

The behavior of useEffect is controlled by the dependency array:

No Dependency Array: The effect runs after every render.
Empty Dependency Array []: The effect runs only once, after the initial render (mimicking componentDidMount).
Specific Dependencies: The effect runs whenever any of the specified dependencies change.
Example: Without Dependency Array

Behavior: The effect runs after every render (initial and updates).

Common Pitfalls and Best Practices

Avoid Missing Dependencies: Always include all state and props that are used inside useEffect in the dependency array to avoid stale closures and bugs.
Multiple useEffect Calls: It’s common and recommended to use multiple useEffect hooks in a single component, each responsible for a specific side effect. This keeps the code more modular and easier to manage.
Cleanup: Always consider cleanup for effects that involve subscriptions, timers, or any other resource that should be released when the component unmounts or the effect is re-triggered.

Understanding and using useEffect effectively allows you to manage side effects in a clean, predictable way within functional components, providing the same capabilities that class components have with lifecycle methods.

Deep Dive into React Hooks

Khushboo Tolat Modi — Mon, 12 Aug 2024 20:04:37 +0000

React Hooks are a powerful feature introduced in React 16.8 that allows you to use state and other React features without writing a class. They enable you to organize the logic inside a component, making your code cleaner and more reusable. Let's dive deeper into some of the most commonly used React Hooks:

1. useState

The useState hook in React allows you to add a state to functional components. It returns an array with two elements: the current state value and a function to update that state.

Basic Usage:

state: The current value of the state.
setState: A function to update the state.

Key Points:

Initial State: The initialState can be any data type, such as a number, string, object, or array.
Updating State: You can update the state by passing a new value to setState or by using a function that takes the previous state as an argument.
Re-renders: Updating the state triggers a re-render of the component.
Lazy Initialization: For a complex initial state, you can pass a function to useState to compute the initial value only on the first render.

Example:

In this example, useState is used to manage a count state, which is updated when the button is clicked.

2. useEffect

The useEffect hook in React allows you to perform side effects in your functional components. Side effects could include data fetching, manual DOM manipulation, or subscribing to services.

Basic Syntax:

How it works:

The first argument is a function that contains the side effect code.
The optional return function is used for cleanup, such as unsubscribing from a service to avoid memory leaks.
The second argument is an array of dependencies. The effect runs only when one of the dependencies changes.

Dependency Array:

If the dependency array is empty ([]), the effect runs only once after the initial render.
If omitted, the effect runs after every render.

Common Use Cases:

Fetching data from an API when the component mounts.
Subscribing to events (e.g., WebSocket, window resize) and cleaning up when the component unmounts.
Updating the document title or interacting with the DOM.

Example:

Understanding useEffect is crucial for managing side effects and ensuring that your components behave as expected across renders.

3. useContext

The useContext hook in React allows you to access and consume context values in your functional components. Context provides a way to share values (like a global state) between components without having to pass props down manually at every level.

Basic Syntax:

How it works:

You first create a context using React.createContext(), which returns a context object.
This context object comes with two components: Provider and Consumer.
The Provider component supplies the context value, which can be accessed by any nested components that use the useContext hook.

Example:

When to use:

Use useContext when you need to pass data deeply through a component tree without prop drilling.
It's particularly useful for themes, user authentication, language settings, or any global state management.

Important Note:

useContext will trigger a re-render whenever the context value changes, so use it judiciously to avoid unnecessary renders in your component tree.

useContext simplifies the consumption of context values, making it easier to manage global state across your application.

4. useReducer

The useReducer hook in React is used for managing more complex state logic in functional components. It provides an alternative to useState and is particularly useful when state changes depend on previous state values or involve multiple sub-values.

Basic Syntax:

How it works:

reducer: A function that determines how the state should change based on the action received. It takes the current state and an action, and returns the new state.
initialState: The initial value of the state.

Example:

When to use:

Use useReducer when you have complex state logic that involves multiple sub-values or when state updates depend on previous state values.
It’s also useful when you need to handle multiple actions that can affect the state in different ways.

useReducer helps in managing state in a more predictable and maintainable manner, especially in scenarios with complex state interactions or when the state logic needs to be encapsulated in a single function.

5. useMemo

The useMemo hook in React is used to optimize performance by memoizing the results of expensive computations, ensuring that they are only recalculated when their dependencies change. It helps avoid unnecessary recalculations on every render.

Basic Syntax:

How it works:

useMemo takes a function that computes a value and a dependency array.
The function is only re-evaluated when one of the dependencies changes.
It returns the memoized result of the computation.

Example:

When to use:

Use useMemo when you have expensive calculations that don’t need to be recalculated on every render.
It's particularly useful for optimizing performance in components with heavy computations or large data transformations.

Important Note:

useMemo doesn’t guarantee that the value won’t be recalculated; it just ensures that it’s recalculated only when dependencies change.
Overusing useMemo or using it for trivial calculations might add unnecessary complexity without significant performance gains.

useMemo is a powerful tool for performance optimization, but it should be used judiciously to strike a balance between performance and complexity.

6. useCallback

The useCallback hook in React is used to memoize callback functions, preventing them from being recreated on every render unless their dependencies change. This can help optimize performance by avoiding unnecessary re-renders of child components that depend on these callbacks.

Basic Syntax:

How it works:

useCallback takes a function and a dependency array.
The function is memoized and will only be recreated if one of the dependencies changes.
It returns the memoized version of the callback function.

Example:

When to use:

Use useCallback to memoize callback functions that are passed as props to child components to prevent unnecessary re-renders.
It's useful when a child component relies on reference equality to prevent unnecessary renders or to avoid recreating functions inside components that trigger expensive operations.

Important Note:

useCallback helps in maintaining stable function references across renders, which can improve performance in components that rely on these functions.

7. useRef

The useRef hook in React is used to persist mutable values across renders without causing re-renders. It can be used to access and interact with DOM elements directly or to store mutable values that don't trigger re-renders when updated.

Basic Syntax:

How it works:

useRef returns a mutable object with a current property.
initialValue is assigned to current on the first render.
You can update current without causing a re-render.

Example:

Common Use Cases:

Accessing DOM Elements: To directly interact with DOM nodes, such as focusing an input or measuring an element’s size.
Persisting Values: To keep values that need to be retained across renders without triggering a re-render, such as keeping track of previous state values or timers.

Important Note:

Updates to current do not trigger a re-render of the component.
useRef is useful for cases where you need to manage or interact with values or DOM elements without affecting the component's rendering logic.

useRef provides a way to maintain mutable references that persist across renders, making it a versatile tool for managing both DOM interactions and non-render-related values.

Conclusion

React Hooks simplifies state management, side-effects handling, and other logic in functional components. They promote code reuse and better organization by enabling you to extract logic into reusable hooks. Understanding these hooks and their proper usage can significantly enhance your React development skills.

Please share your views on this. Happy coding!

Debugging JavaScript Code Like a Pro

Khushboo Tolat Modi — Mon, 12 Aug 2024 09:34:44 +0000

Debugging is an essential part of the software development process, as it allows developers to identify, understand, and fix errors and unexpected behaviors in their code, ensuring the software functions correctly and efficiently. Mastering it can significantly improve your productivity and code quality. Here’s an in-depth guide to help you debug JavaScript code like a pro:

1. Console Logging

console.log(): The most basic form of debugging. Use it to print values and see how they change over time.
console.error() and console.warn(): Useful for highlighting errors and warnings.
console.table(): Displays array or object data in a table format, making it easier to read.

2. Debugger Statement
The debugger statement can be inserted into your code to pause execution at a specific point. When the browser encounters this statement, it will halt and open the debugging tools.

3. Browser Developer Tools

Chrome DevTools

Elements Panel: Inspect and modify HTML and CSS.
Console Panel: Execute JavaScript on the fly, view log messages, and interact with the JavaScript environment.
Sources Panel: Set breakpoints, step through code, and inspect variables.
Network Panel: Analyze network requests and responses.
Performance Panel: Measure and analyze performance bottlenecks.

4. Setting Breakpoints
Setting breakpoints is a fundamental debugging technique that allows you to pause the execution of your code at specific points. This pause lets you inspect the current state of your application, including the values of variables and the flow of execution.

Types of Breakpoints

Line Breakpoints: The most common type. You set these by clicking the line number in your code editor or browser's developer tools. When execution reaches this line, it pauses, allowing you to inspect the current state.
Conditional Breakpoints:
These breakpoints only pause execution if a specified condition is true. It is useful for stopping code execution only when certain criteria are met, reducing unnecessary pauses.
Function Breakpoints: Automatically set to pause whenever a particular function is called. It is helpful when you want to inspect how a function behaves every time it’s executed.
DOM Breakpoints: Set on specific DOM elements to pause execution when a particular event (e.g., attribute modification, node removal) occurs on that element. It is useful for debugging dynamic DOM changes.

5. Watching Expressions
You can add watch expressions in the debugging tools to keep track of specific variables or expressions over time.

Open the Sources panel.
Right-click the Watch section and select "Add watch expression".
Enter the expression you want to watch.

6. Error Handling
Proper error handling can prevent your application from crashing and make debugging easier.

try...catch: Use to handle exceptions.

Custom Error Messages: Provide meaningful error messages to make debugging easier.

7. Linting Tools
Linting tools like ESLint can catch potential errors and enforce coding standards, reducing the likelihood of bugs.

Popular Linting Tools

ESLint
JSHint
Prettier

8. Unit Testing
Unit testing involves writing tests for individual units or components of your code to ensure they work as expected. It helps catch bugs early and makes your code more reliable and easier to refactor.

Popular Testing Frameworks

Jest
Mocha
Jasmine

9. Network and Performance Debugging

Network Panel

Inspect Requests: View details of network requests, including URL, method, status, response, and timing.
Timing: Analyze the time taken for requests to complete and identify bottlenecks.

Performance Panel

Record Performance: Start a performance recording to capture the timeline of events.
Identify Bottlenecks: Look for long tasks, layout thrashing, or excessive reflows that may degrade performance.
Analyze Flame Chart: Understand the execution of tasks over time and identify areas for optimization.

10. Profiling and Memory Management
Use the Performance and Memory panels to identify and fix performance bottlenecks and memory leaks.

Heap Snapshots

Take Heap Snapshots: Capture the memory usage of your application at different points.
Compare Snapshots: Compare multiple snapshots to identify objects that are leaking memory.

Allocation Timelines

Monitor Memory Allocation: Track memory allocation over time to see where your application is using the most memory.
Identify Excessive Memory Usage: Look for spikes in memory allocation and identify which parts of your code are responsible.

Conclusion
Debugging JavaScript effectively requires a combination of the right tools, techniques, and a methodical approach. By leveraging the features of modern browser developer tools, writing clear and maintainable code, and using automated testing, you can identify and fix bugs more efficiently.
Please share your views on this. Happy debugging!

Best Practices for ReactJS to improve your code.

Khushboo Tolat Modi — Tue, 30 Jul 2024 06:40:09 +0000

Improving your React code involves adopting best practices that enhance code quality and maintainability. Here are some key practices to follow:

1. Use Functional Components and Hooks

Functional Components: Functional components are simpler and easier to read than class components. They are stateless by nature but can be stateful when combined with hooks.
Hooks: Hooks like useState and useEffect provide a way to use state and lifecycle methods in functional components.

2. Component Composition

Breaking Down Components: Large components can become difficult to manage and test. Break them down into smaller, reusable components.

3. Consistent Naming Conventions

Clear Naming: Use descriptive names for your components and props. This makes the code easier to understand and maintain.

4. Prop-Types and TypeScript

PropTypes:
Using PropTypes helps catch bugs by enforcing the types of props that a component should receive.
TypeScript: TypeScript provides static type checking, which helps catch errors early in the development process.

5. Code Formatting and Linting

Prettier: Prettier is an opinionated code formatter that ensures consistent code style across your project.
Add a .prettierrc file to your project to configure Prettier.
ESLint: ESLint helps catch potential issues and enforce coding standards.
Install and configure ESLint with a React-specific configuration.

6. Folder Structure

Organize by Feature: Group related components, styles, and tests together to make it easier to find and maintain code.

7. Reusability and DRY Principle

Reusable Components: Create reusable components to avoid duplication and make the code more maintainable.

By following these practices, you can significantly improve the quality and maintainability of your React code, making it easier to work with and extend in the future.

DEV Community: Khushboo Tolat Modi

React Lifecycle Methods

Mounting

1. constructor(props)

2. static getDerivedStateFromProps(props, state)

3. render()

4. componentDidMount()

Updating

1. static getDerivedStateFromProps(props, state)

2. shouldComponentUpdate(nextProps, nextState)

3. render()

4. getSnapshotBeforeUpdate(prevProps, prevState)

5. componentDidUpdate(prevProps, prevState, snapshot)

Unmounting

1. componentWillUnmount()

Error Handling

Error Boundaries Overview

1. static getDerivedStateFromError(error)

2. componentDidCatch(error, info)

How to Use Error Boundaries

Key Considerations:

Best Practices:

Lifecycle methods in Functional Component

useEffect as componentDidMount

useEffect as componentDidUpdate

useEffect as componentWillUnmount

Handling All Three Lifecycle Methods in One useEffect

Controlling the Execution Frequency of useEffect

Common Pitfalls and Best Practices

Deep Dive into React Hooks

1. useState

2. useEffect

3. useContext

4. useReducer

5. useMemo

6. useCallback

7. useRef

Conclusion

Debugging JavaScript Code Like a Pro

Best Practices for ReactJS to improve your code.

1. `constructor(props)`

2. `static getDerivedStateFromProps(props, state)`

3. `render()`

4. `componentDidMount()`

1. `static getDerivedStateFromProps(props, state)`

2. `shouldComponentUpdate(nextProps, nextState)`

3. `render()`

4. `getSnapshotBeforeUpdate(prevProps, prevState)`

5. `componentDidUpdate(prevProps, prevState, snapshot)`

1. `componentWillUnmount()`

1. `static getDerivedStateFromError(error)`

2. `componentDidCatch(error, info)`

`useEffect` as `componentDidMount`

`useEffect` as `componentDidUpdate`

`useEffect` as `componentWillUnmount`

Handling All Three Lifecycle Methods in One `useEffect`

Controlling the Execution Frequency of `useEffect`