DEV Community: Agboola Idris

React Performance Optimization: Tips and Techniques for Faster Apps

Agboola Idris — Sun, 26 Feb 2023 23:16:28 +0000

React is a popular JavaScript library used for building interactive user interfaces for web and mobile applications. However, as the size and complexity of React applications grow, so do the performance issues. Slow rendering times, memory leaks, and a poor user experience can all be caused by performance problems. In this article, we will explore tips and techniques for optimizing React performance to create faster and more efficient applications.

1. Use the React DevTools

The React DevTools is a browser extension that provides insights into the performance of your React application. You can use it to see which components are re-rendering unnecessarily, identify expensive computations, and debug performance issues. The DevTools also includes a profiler, which can help you identify the parts of your code that are causing slow rendering times.

2. Use Memoization

Memoization is a technique for caching the results of expensive computations. In React, you can use the useMemo hook to memoize the results of a function call. This can be particularly useful when you have a component that is re-rendering frequently, but the result of the computation is the same. By memoizing the result, you can avoid unnecessary computations and improve performance.

3. Optimize Your Components

When building a React application, it's important to optimize your components to reduce rendering time. Some techniques for optimizing your components include:

Using shouldComponentUpdate or React.memo to prevent unnecessary re-renders.
Avoiding expensive computations in the render method.
Using functional components instead of class components where possible.

4. Use a Virtual DOM

React uses a virtual DOM to update the user interface. This is a lightweight representation of the actual DOM that React uses to identify changes and update the real DOM. By using a virtual DOM, React can avoid costly DOM updates and improve performance.

5. Minimize DOM Updates

When rendering your React components, it's important to minimize the number of updates to the DOM. You can do this by using techniques like batching updates, deferring updates, and using CSS transitions to animate changes. This can help improve performance and reduce the risk of memory leaks.

6. Use Code Splitting

Code splitting is a technique for splitting your application code into smaller, more manageable chunks. This can help reduce the initial load time of your application and improve performance. In React, you can use tools like Webpack and React.lazy to implement code splitting.

7. Optimize Images and Other Media

Images and other media can be a significant source of performance issues in React applications. To optimize images and other media, you can use techniques like lazy loading, compression, and using the appropriate file format. By optimizing your images and other media, you can reduce the load time of your application and improve performance.

In conclusion, optimizing React performance is essential for creating fast and efficient applications. By using tools like the React DevTools, memoization, and code splitting, you can improve the performance of your application and provide a better user experience. Additionally, optimizing your components, minimizing DOM updates, and optimizing images and other media can further improve the performance of your React application. Feel free to share your feedback 👇

Factors to consider before chosing technology to build your product

Agboola Idris — Mon, 06 Feb 2023 08:10:34 +0000

When choosing a technology to build your product, there are several factors to consider

1. Problem fit:

Choose a technology that is well-suited to solve the specific problem you're trying to address with your product.

2. Development time and cost:

Consider the time and resources required to develop the product using the technology, as well as the ongoing maintenance costs.

3. Scalability:

Choose a technology that can easily scale as your product grows and evolves.

4. User experience:

Make sure the technology supports a seamless user experience and provides the features and functionality your users need.

5. Integration with existing systems:

Consider how well the technology integrates with other systems and tools you already use.

6. Technical skills:

Make sure you have the technical skills and resources necessary to develop and maintain the product using the technology.

7. Support and community:

Look for a technology that has a strong community and readily available support to help you overcome challenges and keep the product up-to-date.

8. Future plans:

Consider the future plans for the technology, including its roadmap and potential for innovation, to ensure that it will meet your needs for the long-term.

9. Security:

Consider the security and privacy features of the technology and make sure it meets any regulatory requirements.

conclusion

By taking these factors into account, you can make an informed decision and choose a technology that best fits your needs and helps you achieve your goals. Feel free to comment share your feedback 👇

Libraries to consider when using React in 2023 for production applications.

Agboola Idris — Sun, 05 Feb 2023 17:18:35 +0000

when we talk about programming languages that release frameworks often, Javascript will always take the lead, and React is one of its popular frameworks which was built by the Facebook team. it has been widely adopted among developers and there is no doubt that it will continue to gain more fame in 2023. Developing a small application is a bit easier in React as the application getting grows it then becomes more complex. This article will share with you my favorite libraries that can make life easier when building a large project with React.

1. Next

Next.js enables you to create full-stack web applications by extending the latest React features and integrating powerful Rust-based JavaScript tooling for the fastest builds. To effectively use Next.js, You need to be familiar with JavaScript, React, and related web development concepts. You can learn more about Next.js from their official docs

2. Typescript

TypeScript is a strongly typed programming language that is a superset of Javascript. Getting run time errors in Typescript is unlikely because It points out likely errors in the development. Combining your React with Typescript will reduce the number of errors in your code. If you have an interest in checking Typescript out I will suggest checking out their official docs or code-evolution free React and Typescript course on youtube.

3. Tailwind

Using Tailwind CSS, you don't have to write custom CSS to style your application because it's a utility-first framework. These days it is widely used among developers to build complex UI because of its simplicity. You can check out their official docs for more information.

4. React-hook-form

The React-hook-form library is a powerful, tiny form library without dependencies that remove unnecessary re-rendering and minimize validate computations. It also speeds up mounting and minimizes validation calculations. You can learn more about React-hook-form from their official docs.

5. React-query

Most of the time we will be dealing with server-side data which we don’t have control over the data, making use of useEffect and useState hook will not be the best solution in this stage especially when the application is getting more complex. By using React-query, you will be able to fetch, synchronize, update, and cache your remote data while reducing the amount of code you need to write. You can read more from their official docs.

6. Zustand

Recently, I came across this amazing global state management system. If it had occurred to me earlier, I would never have looked for alternative state management library. It is a small, fast, and scalable bear bones state-management solution using simplified flux principles. Has a comfy API based on hooks, and isn't boilerplates or opinionated. check out their official docs for more info.

7. Story-book

With Storybook, you can automatically visually test your components to prevent bugs and document components for reuse. It helps developers to develop faster and more easily by isolating components. It allows you to focus on one component at a time. The entire UI can be developed without having to start up a complex development stack, enter data into a database, or navigate the application. You can check out the official docs for more details on how to get started.

Conclusion

I hope this article helped you choose the best React library for your site. When selecting the frameworks and libraries, always keep the uses and features of the libraries in mind.

Feel free to comment about your favorite React library and share your feedback 👇

Customize Cursor in React App

Agboola Idris — Thu, 29 Sep 2022 15:45:04 +0000

In this article, I will show you how to create a customized cursor with Reactjs.

Having a custom cursor is an interesting and interactive feature that can be added to web applications to enhance the user experience. A custom cursor is essentially a graphical element that replaces the default cursor in a web application. This can be used to create a unique and interactive user experience, as well as add a level of sophistication to the web application.

You should have Nodejs installed on your machine; If not, click here to download and install Nodejs on your local device. Nodejs installation comes with NPM by default, which we’ll use to install the packages needed for this tutorial.

step 1

Let’s begin by installing React by running the following command on our terminal:
npx create-react-app project-name
You can replace "project-name" above with the name of your choice. After the template is generated, open the folder with the text-editor of your choice.

step 2

We will be using the framer-motion library for the animation, so let's install the library by running the following command on our terminal:
npm i framer-motion

step 3

Now that we have installed all the dependencies, we need to find a way to track the position of the mouse pointer and store it in the useState hook.

import React, { useEffect, useState } from "react";

function App() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (ev: MouseEvent) => {
    setMousePosition({
      x: ev.clientX,
      y: ev.clientY,
    });
  };
  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove);
  }, []);


  return (
    <div className="App">
      <h1>Hello world</h1>
    </div>
  );
}

export default App;

step 4

Let's import motion from framer-motion and render a div element from motion,and then add variant props to the div element. Don't forget to add className to the element for styling. You can also reference the code below.

import React, { useEffect, useState } from "react";
import { motion, Variants } from "framer-motion";
function App() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (ev: MouseEvent) => {
    setMousePosition({
      x: ev.clientX,
      y: ev.clientY,
    });
  };
  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove);
  }, []);

  const variants: Variants = {
    default: {
      x: mousePosition.x,
      y: mousePosition.y,
    },
  };

  return (
    <div className="App">
      <motion.div className="cursor" variants={variants} animate="default" />
    </div>
  );
}

step 5

In this final step, let's style the cursor. Note that the styling depends on your choice.

.cursor {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  pointer-events: none;
}

Now we have come to the end of this article, I hope you find this article helpful. If so, kindly share this post with more people. You can find the source code on github.

Best way to Manage State in React Project in 2022

Agboola Idris — Sat, 19 Mar 2022 09:54:00 +0000

When talking about front-end development in 2022, React is one of the most popular and use technology in the industry and React does not come with its own global state management tool until recently. React team added a new state management API, called Context API which has a lot of limitations. In this article I will share with you best way to manage state in your next React project.

Recoil

Recoil is an open-source state management library with more than 14k stars on Github, it was invented by Dave McCabe, a Software Engineer at Facebook. It provides a global state so all components in a React application can share states easily and it is minimal compared to Redux with no boilerplate code setup needed.

Redux

Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test with more than 57.7k stars on Github.

Mobx

MobX, a simple, scalable, and standalone state management library, follows functional reactive programming (FRP) implementation and prevents inconsistent state by ensuring that all derivations are performed automatically.

Flux

Flux is the application architecture that Facebook uses for building client-side web applications, it is more of a pattern than a framework, and does not have any hard dependencies. However, we often use EventEmitter as a basis for Stores and React for our Views. The one piece of Flux not readily available elsewhere is the Dispatcher. This module, along with some other utilities, is available here to complete your Flux toolbox.

useContext

useContext is a React hook that provides a way to pass data through the component tree without manually passing props down through each nested component.

How to Setup Next App, and MUI5 with Typescript

Agboola Idris — Sun, 16 Jan 2022 18:38:52 +0000

Introduction

Next.js is a JavaScript open-source framework built on top of Node.js that enables you to build superfast and extremely user-friendly static websites, as well as web applications using React. React documentation mentions Next.js among "Recommended Toolchains" advising it to developers as a solution when "building a server-rendered website with Node.js.

Material UI is an open-source, front-end framework for React components that has 60,500 plus stars on Github. It is built using Less. Less (stands for Leaner Style Sheets), is a backward-compatible language extension for CSS. Material UI is based on Google’s Material Design to provide a high-quality, digital experience while developing front-end graphics. Material Design focuses on providing bold and crisp designs – it builds textures by focusing on how the components cast shadows and reflect light.

TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor. TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno, and in your apps.

Installation

Before we get started, let’s confirm that we have Nodejs installed on our machine by running the following command on our terminal:

node --version

and also run the following command to check if NPM installed on our computer

npm --version

If this returns an error, click here to download and install Nodejs on your local machine. Nodejs installation comes with NPM by default, which we’ll be using to install the packages need for this tutorial.

step 1

With Nodejs and NPM installed, let’s begin by installing Nextjs and Typescript by running the following command on our terminal:

npx create-next-app@latest  --ts

You will be asked, "What is your project named?" Type in the name you want to give the project and click enter

Step 2

cd into the directory, and type the following command to open the project in VScode:

code .

we don't need to worry about the Typescript setup because the project has come with Typescript setup. let move on to the next step.

step 3

let install Material UI by typing the following command on our terminal

npm install @mui/material @emotion/react @emotion/styled

we need to configure Nextjs to work with Material UI

step 4

let create createEmotionCache.ts to configure emotion to work with material by typing the following command on your terminal

touch createEmotionCache.ts`

copy the following code into the createEmotionCache.ts

import createCache from '@emotion/cache';
 const createEmotionCache = () => {
  return createCache({ key: 'css' });
};
export default createEmotionCache;

step 5

create a file for Material UI theme, for this tutorial, name the file theme.ts
and copy the following code to the file. to learn more about the Material UI theme click here

import { createTheme } from '@mui/material/styles';
import { red } from '@mui/material/colors';

const theme = createTheme({
    palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
  },
});
export default theme;

step 6

We will be extending the document and injecting the server-side rendered styles into the head. To override that default behavior, you must create a file at ./pages/_document.tsx where you can extend the Document class. copy the following code to the file

import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import theme from '../styles/theme';
import createEmotionCache from '../lib/createEmotionCache';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          {/* PWA primary color */}
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  const { renderPage: originalRenderPage } = ctx;

  // You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
  // However, be aware that it can have global side effects.
  const cache = createEmotionCache();
  const { extractCriticalToChunks } = createEmotionServer(cache);

  ctx.renderPage = () =>
    originalRenderPage({
      // eslint-disable-next-line react/display-name
      enhanceApp: (App: any) => (props) =>
        <App emotionCache={cache} {...props} />,
    });

  const initialProps = await Document.getInitialProps(ctx);
  // This is important. It prevents emotion to render invalid HTML.
  // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153
  const emotionStyles = extractCriticalToChunks(initialProps.html);
  const emotionStyleTags = emotionStyles.styles.map((style) => (
    <style
      data-emotion={`${style.key} ${style.ids.join(' ')}`}
      key={style.key}
      // eslint-disable-next-line react/no-danger
      dangerouslySetInnerHTML={{ __html: style.css }}
    />
  ));

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      ...React.Children.toArray(initialProps.styles),
      ...emotionStyleTags,
    ],
  };
};

step 7

we also need to wrap material UI with the app component, let copy the following lines of code to _app.ts file inside the page folder.

import * as React from 'react';
import Head from 'next/head';
import { AppProps } from 'next/app';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider, EmotionCache } from '@emotion/react';
import theme from '../styles/theme';
import createEmotionCache from '../../src/lib/createEmotionCache';

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache;
}

const App = (props: MyAppProps) => {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <title>My page</title>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </CacheProvider>
  );
};

export default App;