7 Techniques to Optimize React Applications Performance

shirisha95 — Sat, 10 Dec 2022 11:08:31 +0000

Optimizing the performance of a React application is an important aspect of maintaining a high-quality user experience. It requires deeper understanding of React framework, various phases of the components lifecycle and profiling tools to measure bottlenecks and analyze performance.

There are several techniques you can use to improve the performance of your React application.Below are some tips you can follow to optimize React performance:

Use the shouldComponentUpdate lifecycle method to avoid unnecessary re-renders. This method allows you to control when a component is updated by determining if the new props or state are different from the previous ones.
Use the PureComponent class instead of the Component class for components that do not require complex logic. Pure components implement the shouldComponentUpdate method with a shallow comparison of the props and state, so they only re-render if the props or state have changed.
Use the React.memo higher-order component to optimize functional components. This is similar to PureComponent, but it can be used with functional components instead of class-based components.
Use the React.lazy and React.Suspense components to lazy-load components that are not immediately needed. This can improve initial loading time by only loading the necessary components on demand.
Use the useCallback and useMemo hooks to optimize functions and computed values within components. These hooks allow you to memoize values and functions so that they are not re-created unnecessarily.
Use the React.Fragment component to avoid unnecessary wrapper elements in your components. Wrapper elements, such as divs, can add extra nodes to the DOM, which can affect performance. React.Fragment allows you to return multiple elements from a component without adding extra nodes to the DOM.
Use Immutable Data Structures as they are more efficient to compare than mutable data structures. They have zero side-effects, simpler to create, test, and use, and can prevent unnecessary re-renders

🎉 Bonus Tip:
Use the profiler built into React to identify performance bottlenecks and optimize the rendering of your components. The profiler can help you understand which components are rendering frequently and why, allowing you to make changes to improve their performance.

By following these tips, you can improve the performance of your React application and provide a better user experience for your users. It is also important to regularly monitor and profile your application to identify areas for optimization and ensure that it continues to perform well.

Understanding React Context

shirisha95 — Tue, 13 Sep 2022 17:54:42 +0000

If you think about it, the top-down data flow is what gave react superpowers.

You have more control over your data. No more early JS days where you sweep through heaps & loads of JS files and figure out what mutated your state.
It’s easier to debug, as you know what is coming from where

But what if we are building a deeply nested app?

const App = () => {
  return (
    <div>
      App Contents
      <Toolbar theme={store.theme} />
    </div>
  );
};

const Toolbar = ({ theme }) => {
  return (
    <div>
      <Button theme={theme} label="Button 1" />
      <Button theme={theme} label="Button 2" />
    </div>
  );
};

const Button = ({ theme, label }) => {
  return (
    <button style={{ backgroundColor: theme === "dark" ? "black" : "white" }}>
      {label}
    </button>
  );
};

This is called prop-drilling, and this gets even worse if you have more layers of components between the data source and user. How to solve this? React Context to the rescue!!

Solving prop drilling by using the Context API

The Context API lets you broadcast your state/data to multiple components by wrapping them with a context provider. Pass your state as value attribute to the contextProvider, the children components can then tap into this provider using a context consumer or the useContext Hook.

Step 1: Create Context

// ThemeContext.jsx
import React from "react";
const ThemeContext = React.createContext();
export default ThemeContext;

Step 2: Context Provider:
Now we can wrap all the context users with the Context Provider, and pass the value that we want to 'broadcast'.

const App = () => {
  return (
    <ThemeContext.Provider value={{ theme: store.theme }}>
      App Contents
      <Toolbar />
    </ThemeContext.Provider>
  );
};

Now, how do we access the theme from its descendants Toolbar, Button?

Step 3: Context Consumer: useContext
To access the context, we use useContext hook from any descendant of Component App.

import React from "react";
import { ThemeContext } from "./ThemeContext";

const Button = ({ theme, label }) => {
  const { theme } = React.useContext(ThemeContext);
  return (
    <button style={{ backgroundColor: theme === "dark" ? "black" : "white" }}>
      {label}
    </button>
  );
};

Here, Our rendered output remains the same, but the code underneath is a bit leaner and cleaner.

That's all! I hope that I helped clarify why you need context and how to implement it. Feel free to post any questions, comments or any suggestions.

Forem: shirisha95

7 Techniques to Optimize React Applications Performance

Understanding React Context