Modern tools like Zoom and Google Meet allow us to blur or completely replace our background in real-time video, creating a polished and distraction-free environment regardless of where we are.

This is possible because of advancements in machine learning. In this blog, we'll explore how to achieve real-time background blurring and replacement using TensorFlow's body segmentation capabilities.

Tensorflow body segmentation

TensorFlow body segmentation is a computer vision technique that involves dividing an image into distinct regions corresponding to different parts of a human body. It typically employs deep learning models, such as convolutional neural networks (CNNs), to analyze an image and predict pixel-level labels. These labels indicate whether each pixel belongs to a specific body part, like the head, torso, arms, or legs.

The segmentation process often starts with a pre-trained model, which has been trained on large datasets. The model processes the input image through multiple layers of convolutions and pooling, gradually refining the segmentation map. The final output is a precise mask that outlines each body part, allowing for applications in areas like augmented reality, fitness tracking, and virtual try-ons.

To learn more about Tensorflow and body segmentation, check out the below resources.

• TensorFlow segmentation
• Body Segmentation with MediaPipe and TensorFlow.js

Setting up React app

We'll create a simple React app that streams video from the webcam.

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

const App = () => {
  const videoRef = useRef(null);

  useEffect(() => {
    const getVideo = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: true,
        });
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      } catch (err) {
        console.error("Error accessing webcam: ", err);
      }
    }

    getVideo();

    return () => {
      if (videoRef.current && videoRef.current.srcObject) {
        videoRef.current.srcObject.getTracks().forEach(track => track.stop());
      }
    };
  }, []);

  return (
    <div>
      <video ref={videoRef} autoPlay width="640" height="480" style={transform: 'scaleX(-1)'}/>
    </div>
  );
}

export default App;

In the code above, we render a <video> element, and once the app is mounted, we obtain the video stream from the user's webcam using navigator.mediaDevices.getUserMedia. This call will prompt the user to grant permission to access their camera. Once the user grants permission, the video stream is captured and rendered in the <video> element.

Installing packages

Next, let's add the necessary TensorFlow packages.

yarn add @tensorflow/tfjs-core @tensorflow/tfjs-converter @tensorflow-models/body-segmentation @mediapipe/selfie_segmentation

@tensorflow/tfjs-core is the core JavaScript package for TensorFlow, @tensorflow-models/body-segmentation contains all the functions we need for body segmentation, and @mediapipe/selfie_segmentation is our pre-trained model.

Creating body segmenter

The TensorFlow body segmentation package provides a pre-trained MediaPipeSelfieSegmentation model for segmenting the human body in images and videos. This model is specifically designed for the upper body. If our requirement involves the entire body, we may want to consider other models like BodyPix.

We need to load this model to create a segmenter.

import * as bodySegmentation from "@tensorflow-models/body-segmentation";

const createSegmenter = async () => {
  const model = bodySegmentation.SupportedModels.MediaPipeSelfieSegmentation;
  const segmenterConfig = {
    runtime: "mediapipe",
    solutionPath: "https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation",
    modelType: "general",
  };
  return bodySegmentation.createSegmenter(model, segmenterConfig);
};

We load the model from a CDN, configure the runtime as mediapipe, and set the modelType to general. Then, we create the segmenter using the bodySegmentation.createSegmenter method.

// ./videoBackground.js
import * as bodySegmentation from "@tensorflow-models/body-segmentation";

const createSegmenter = async () => {
  const model = bodySegmentation.SupportedModels.MediaPipeSelfieSegmentation;
  const segmenterConfig = {
    runtime: "mediapipe",
    solutionPath: "https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation",
    modelType: "general",
  };
  return bodySegmentation.createSegmenter(model, segmenterConfig);
};

class VideoBackground {
  #segmenter;

  getSegmenter = async () => {
    if (!this.#segmenter) {
      this.#segmenter = await createSegmenter();
    }
    return this.#segmenter;
  };
}

const videoBackground = new VideoBackground();
export default videoBackground;

Here, we define a VideoBackground class and create an instance of it. Inside the class, the getSegmenter function ensures that the segmenter is created only once, so we don't have to recreate it each time.

Blur the video background

Before we continue further, let's update our demo app. Since we are going to modify the video, we need a <canvas/> to display the modified video. Add that to our demo app.

// rest of the code...
const App = () => {
  const canvasRef = useRef();
  // rest of the code...
  return (
    <div>
      <video
        ref={videoRef}
        autoPlay
        width="640"
        height="480"
        style={{ display: "none" }}
      />
      <canvas ref={canvasRef} width="640" height="480" style={transform: 'scaleX(-1)'}/>
    </div>
  );
}

Also, hide the <video> element by setting display: "none" since we don't want to display the raw video.

Next, create a function within the VideoBackground class to blur the video.

// rest of the code...
class VideoBackground {
  // rest of the code...

  #animationId;
  stop = () => {
    cancelAnimationFrame(this.#animationId);
  };

  blur = async (canvas, video) => {
    const foregroundThreshold = 0.5;
    const edgeBlurAmount = 15;
    const flipHorizontal = false;
    const blurAmount = 5;
    const segmenter = await this.getSegmenter();

    const processFrame = async () => {
      const segmentation = await segmenter.segmentPeople(video);
      await bodySegmentation.drawBokehEffect(
        canvas,
        video,
        segmentation,
        foregroundThreshold,
        blurAmount,
        edgeBlurAmount,
        flipHorizontal
      );
      this.#animationId = requestAnimationFrame(processFrame);
    };
    this.#animationId = requestAnimationFrame(processFrame);
  };
}

The blur function takes video and canvas references. It uses requestAnimationFrame to continuously draw the resulting image onto the canvas. First, it creates a body segmentation using the segmenter.segmentPeople function by passing the video reference. This allows us to identify which pixels belong to the background and foreground.

To achieve the blurred effect, we use the bodySegmentation.drawBokehEffect function, which applies a blur to the background pixels. This function accepts additional configurations like foregroundThreshold, blurAmount, and edgeBlurAmount, which we can adjust to customize the effect.

We've also added a stop function to halt video processing by canceling the recursive requestAnimationFrame calls.

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

function App() {
  const [cameraReady, setCameraReady] = useState(false);
  // rest of the code...

  <video
    // rest of the code...
    onLoadedMetadata={() => setCameraReady(true)}
  />;
  // rest of the code...
}

Before calling the blur function, ensure the video is loaded by waiting for the onLoadedMetadata event to be triggered.

All set; let's blur the video background.

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

import videoBackground from "./videoBackground";

function App() {
  const [cameraReady, setCameraReady] = useState(false);
  const videoRef = useRef(null);
  const canvasRef = useRef();

  useEffect(() => {
    async function getVideo() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: true,
        });
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      } catch (err) {
        console.error("Error accessing webcam: ", err);
      }
    }

    getVideo();

    return () => {
      if (videoRef.current && videoRef.current.srcObject) {
        videoRef.current.srcObject.getTracks().forEach(track => track.stop());
      }
    };
  }, []);

  useEffect(() => {
    if (!cameraReady) return;
    videoBackground.blur(canvasRef.current, videoRef.current);
    return () => {
      videoBackground.stop();
    };
  }, [cameraReady]);

  return (
    <div className="App">
      <video
        ref={videoRef}
        autoPlay
        width="640"
        height="480"
        style={{ display: "none" }}
        onLoadedMetadata={() => setCameraReady(true)}
      />
      <canvas ref={canvasRef} width="640" height="480" />
    </div>
  );
}

export default App;

Here, we added another useEffect that triggers when cameraReady is true. Inside this useEffect, we call the videoBackground.blur function, passing the canvas and video refs. When the component unmounts, we stop the video processing by calling the videoBackground.stop() function.

Replace with a virtual background

If we feel that just blurring is not enough and want to completely replace the background, we need to remove the background from the video and place an <img/> behind the <canvas/>. To remove the background, we can utilize the bodySegmentation.toBinaryMask function. This function will return an ImageData with its alpha channel being 255 for the background and 0 for the foreground. We can use this info in the original data and set the background pixels' alpha to be transparent.

// rest of the code...
class VideoBackground {
  // rest of the code...

  remove = async (canvas, video) => {
    const context = canvas.getContext("2d");
    const segmenter = await this.getSegmenter();
    const processFrame = async () => {
      context.drawImage(video, 0, 0);
      const segmentation = await segmenter.segmentPeople(video);
      const coloredPartImage = await bodySegmentation.toBinaryMask(
        segmentation
      );
      const imageData = context.getImageData(
        0,
        0,
        video.videoWidth,
        video.videoHeight
      );
      // imageData format; [R,G,B,A,R,G,B,A...]
      // below for loop iterate through alpha channel
      for (let i = 3; i < imageData.data.length; i += 4) {
        // Background pixel's alpha will be 255.
        if (coloredPartImage.data[i] === 255) {
          imageData.data[i] = 0; // this is a background pixel's alpha. Make it fully transparent
        }
      }
      await bodySegmentation.drawMask(canvas, imageData);
      this.#animationId = requestAnimationFrame(processFrame);
    };
    this.#animationId = requestAnimationFrame(processFrame);
  };
}

Similar to the blurring process, inside processFrame, we first create the segmentation using segmenter.segmentPeople and convert it to a binary mask using bodySegmentation.toBinaryMask. We then obtain the original image data with context.getImageData. Next, we loop through the image data to make the background pixels transparent. Finally, we draw the result on the canvas using bodySegmentation.drawMask.

Before calling this function, let's modify our demo app by adding an option to switch between none, blur, and image effects, rather than removing the blur function. Additionally, include a background image.

const BACKGROUND_OPTIONS = ["none", "blur", "image"];
function App() {
  const [backgroundType, setBackgroundType] = useState(BACKGROUND_OPTIONS[0]);
  // rest of the code...

  return (
    <div>
      // rest of the code...
      {backgroundType === "image" && (
        <img
          alt=""
          style={{
            position: "absolute",
            top: 0,
            bottom: 0,
            width: "640px",
            height: "480px",
          }}
          src="/bgImage.png"
        />
      )}
      // rest of the code...
      <div>
        <select
          value={backgroundType}
          onChange={e => setBackgroundType(e.target.value)}
        >
          {BACKGROUND_OPTIONS.map(option => (
            <option value={option} key={option}>
              {option}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}

Here, we added a <select> element to choose between none, blur, and image, and an <img> element to display the background image, which will serve as our virtual background.

All set. Now, let's update the useEffect.

useEffect(() => {
  if (!cameraReady || backgroundType === "none") return;

  const bgFn =
    backgroundType === "blur" ? videoBackground.blur : videoBackground.remove;

  bgFn(canvasRef.current, videoRef.current);

  return () => {
    videoBackground.stop();
  };
}, [cameraReady, backgroundType]);

Based on the selection, we will call either videoBackground.blur or videoBackground.remove.

Full working example can be found in this Github repo.

• Components are not unmounted properly.
• Event listeners are not cleared after use.
• Unnecessary data stored in the state as well as not resetting the state.

This video shows how we can use the memory tab in Chrome Developer Tools to test our application for memory leaks.

The following video was made for internal use at BigBinary. The video is being presented "as it was recorded".

Watch on YouTube

In the realm of web development, securing web applications is paramount to protect user data and ensure the integrity of the system. Regular frontend security audits are essential to identify and address vulnerabilities. In this blog post, we will explore the process of performing a frontend security audit specifically for React applications. We will highlight key areas to focus on to enhance the security of your React codebase.

1. Verify the usage of dependencies

Begin the frontend security audit by scrutinizing the dependencies used in your React application. Remove any unused dependencies to minimize potential attack vectors. Stay updated with the latest security patches and regularly update the dependencies to mitigate known vulnerabilities.

2. Audit dependencies for security vulnerabilities

Leverage tools like yarn audit or npm audit to scan your dependencies for any known security vulnerabilities. Stay vigilant in addressing these vulnerabilities promptly by updating to the latest secure versions or seeking alternative libraries when necessary.

3. Guard against cross-site scripting (XSS)

React is ‘mostly’ safe from XSS attacks. Because under the hood, it has built-in protection against XSS attacks. React automatically encodes any user input before rendering it, ensuring that user input is never executed as code. This feature makes React almost inherently secure in terms of XSS vulnerabilities.

However, we can still choose to render user provided html and scripts through dangerouslySetInnerHtml prop or using libraries like html-react-parser or html-to-react. While doing this, we should be very careful to use it only when It is absolutely necessary to make sure we are sanitizing the raw HTML using a library like Dompurify.

import DOMPurify from "dompurify";
import htmlReactParser from "html-react-parser";
import { Parser as HtmlToReactParser } from "html-to-react";

const htmlToReactParser = new HtmlToReactParser();

const UnsafeComponent = userProvidedHtml => {
  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: userProvidedHtml }} />
      <div>{htmlReactParser(userProvidedHtml)}</div>
      <div>{htmlToReactParser.parse(userProvidedHtml)}</div>
    </>
  );
};

const SafeComponent = userProvidedHtml => {
  const sanitizedHtml = DOMPurify.sanitize(userProvidedHtml);

  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
      <div>{htmlReactParser(sanitizedHtml)}</div>
      <div>{htmlToReact(sanitizedHtml)}</div>
    </>
  );
};

Another XSS attack surface in React is URLs provided to anchor tags. React doesn’t escape strings provided as HTML attribute props. So strings like javascript:alert(0) would trigger the JavaScript code when passed to href prop of an anchor tag.

For example the below anchor tag would trigger a browser alert dialog when clicked.

<a href="javascript:alert(0)">Click me</a>

Similarly, the code below would also trigger a browser alert dialog.

window.location.href = "javascript:alert(0)";

We have to be careful when using links inputted by users to render links or redirect to them by setting window.location.href. To prevent the code from executing, we can use backend validations to make sure the links are valid and safe to use. For additional safety we could implement a whitelist of allowed protocols like https and http and reject all other protocols on the frontend.

const getSafeURL = url => {
  const parsed = new URL(url);
  if (parsed.protocol !== "https:" || paresed.protocol !== "http:") return;

  return url;
};

Inspect links and redirect logic in your frontend code for potential cross-site scripting vulnerabilities. Validate user-inputted URLs to prevent unauthorized execution of malicious code. Implement measures to sanitize and escape user-generated content properly.

4. Verify the necessity of third-party scripts

Examine the 3rd party scripts included in your web application and verify their necessity. Remove any unused or unnecessary scripts, reducing the attack surface and potential risks.

5. Load assets over secure protocols

Ensure that all assets, such as images, fonts, and stylesheets, and external scripts are loaded over secure protocols such as https. Loading even a single asset over insecure protocols like http can expose your application to potential security risks, and attackers can exploit this to steal sensitive information.

6. Avoid attaching tokens to external API requests

It is a common practice to have a default header configured for all API requests in an application. Libraries like axios allow us to configure a default header for all requests. This is useful when we need to attach an authentication token to all requests. However, this can be a potential security risk if we use the same axios instance to make requests to external APIs. This is because the authentication token would be attached to all requests made to external APIs, which could be exploited by attackers to gain access to sensitive information.

7. Always encode URL paths and parameters

It is crucial to consistently encode URL paths and parameters to prevent the execution of malicious code. Rather than manually encoding URLs each time, it is recommended to utilize libraries specifically designed for constructing URLs such as query-string or qs. By leveraging these library functions, you can automate the encoding process and ensure that URLs are properly sanitized, minimizing the risk of security vulnerabilities associated with unencoded or improperly encoded data.

import qs from "qs";

const params = {
  name: "John Doe",
  age: 25,
};

const encodedParams = qs.stringify(params);
// encodedParams = "name=John%20Doe&age=25"

8. Enhance script integrity with the "integrity" attribute

To ensure script integrity, add the integrity attribute to the available scripts. This attribute verifies that the script file hasn't been tampered with and matches the original source. It provides an additional layer of protection against malicious modifications.

<script
  src="https://example.com/myscript.js"
  integrity="sha384-AbCdIjK..."
></script>

9. Remove source maps from the production bundle

Source maps are useful during development for debugging purposes, as they map the minified or transpiled code back to its original source code. However, in a production environment, making the source code easily accessible through source maps can pose a security risk. Attackers can analyze the source code to identify vulnerabilities, potentially exposing sensitive information or gaining insight into your application's inner workings. By disabling source maps, you reduce the risk of exposing your codebase to potential attackers. Source maps also provide an avenue for potential intellectual property theft. Disabling source maps in the production build helps protect your intellectual property by making it harder for unauthorized parties to reverse engineer and steal your code.

Disabling sourcemaps would also disable extensions like React Devtools, Redux Devtools, etc. which could be used by attackers to gain access to sensitive information.

10. Securely manage state

Use proper state management practices in your React application. Avoid storing sensitive information in component state or global state management systems that can be accessed or modified by unauthorized users. Utilize techniques like secure context providers or server-side session management to handle sensitive data securely.

11. Evaluate storage and data handling

Carefully examine the usage of localStorage, globalProps, and cookies in your frontend code for sensitive data, such as user credentials, authentication tokens, user locations, API keys and personally identifiable information. Implement encryption and secure protocols to protect sensitive data where required.

12. Robust error handling

Review your error handling mechanisms to ensure that error messages are informative but do not divulge sensitive system details or implementation specifics. Avoid logging or displaying error messages that could potentially aid attackers in exploiting vulnerabilities, like shown below.

try {
  // Some code that may throw an error
  const userData = await fetchUserData(userId);
} catch (error) {
  console.error("Error occurred while fetching user data:", error);
}

Instead, log errors to a secure backend service and display a generic error message to the user. This would prevent attackers from gaining access to sensitive information while still providing a good user experience.

try {
  // Some code that may throw an error
  const userData = await fetchUserData(userId);
  // Process the fetched data
} catch (error) {
  // Perform appropriate error handling, such as:
  // - Providing a user-friendly error message with helpful information
  // - Offering options for users to retry the operation
  // - Logging the error to a secure logging service for further analysis
  // - Implementing fallback behavior or graceful recovery if possible

  // Log the error to a secure logging service
  logError(error);

  // Display a user-friendly error message
  toast.error("Oops! Something went wrong. Please try again later.");
}

13. Enforce eslint rules that prevent unsafe practices

Leverage eslint rules to enforce best practices and prevent unsafe coding practices. Below are some recommended eslint plugins that can be used to identify and prevent potential security vulnerabilities in your application.

• eslint-plugin-security Identifies potential security hotspots, such as a dangerous regular expression, square bracket notation, etc.

• eslint-plugin-sonarjs SonarJS rules for ESLint to detect bugs and suspicious patterns in your code.

14. Implement Content Security Policy (CSP)

Content Security Policy is an HTTP header that helps mitigate various web vulnerabilities, including cross-site scripting (XSS) attacks. Define a robust CSP for your web application to specify the trusted sources from which various resources, such as scripts, stylesheets, or images, can be loaded. This restricts the execution of untrusted code and helps prevent XSS attacks.

15. Regularly review and update security measures

Perform periodic reviews and updates of your frontend security measures. Stay updated with the latest security best practices, vulnerabilities, and patches. Continuously monitor security advisories for your dependencies and promptly address any reported security vulnerabilities by updating to secure versions or migrating to alternative libraries.

Conclusion

Conducting a frontend security audit is an essential part of safeguarding your web application from potential threats. By following the outlined steps and implementing best practices, you can significantly reduce the risk of security breaches and protect your users' data and privacy. Remember, staying proactive in maintaining the security of your frontend codebase is crucial in an ever-evolving threat landscape.

Why is localization important?

Localization is important for overcoming language barriers and making your products accessible to people from different cultures and regions.

For example, let's say you are developing a product for a company that has customers in multiple countries, and the product is currently only available in English. This means that potential customers who speak other languages may be less likely to use the product or may have difficulty navigating it. By implementing localization in the product, you can easily add support for other languages without requiring extensive code changes. This will make the product more accessible to a wider range of audiences and increase the likelihood of the product being used by people in different regions.

Localization is more than just translating text. It also involves adapting various aspects of the products, including date and time formats, currencies, and other cultural conventions to create a more native experience for the target audience. Providing a localized experience can help the product better meet the needs and expectations of users in different regions, leading to better user engagement and satisfaction.

How to implement localization in React?

To implement localization effectively, it's important to choose a suitable localization package that works well with the chosen framework. In Neeto products, the i18next and react-i18next libraries are used for localization because they are well-maintained, have good documentation and are easy to use. i18next provides a flexible and powerful translation engine, while react-i18next provides hooks and components for managing translations in React components. Before getting into the details of how to implement localization using these libraries, let's first understand some of the terms that would be used.

Translation file

A translation file is a file that contains a set of translated strings for a particular language. Each supported language will have its own dedicated translation file.

For example, a translation file for English would contain English translations for all the strings in the application.

{
  "browseProducts": "Browse Products",
  "addToCart": "Add to Cart"
}

A translation file for Spanish would contain Spanish translations for all the strings in the application.

{
  "browseProducts": "Explorar productos",
  "addToCart": "Agregar al carrito"
}

Translation key

A translation key is a unique identifier used to look up a translated string in a translation file. A translation key can be any string that you want and it is typically a short, descriptive string that represents the text to be translated. In the above example, browseProducts and addToCart are the translation keys.

In some cases, translation keys are grouped together based on the context in which they are used or the component that they are used in. For instance, translation keys for buttons may be grouped together. In this case, a prefix is employed to group the translation keys together. To access a specific translation string within a group, you can use the prefix followed by a dot and then the translation key. Let's see an example of this.

{
  "button": {
    "submit": "Submit",
    "cancel": "Cancel"
  }
}

In this example, all the translation keys for buttons are grouped together under the prefix button. To access the translation string for the button Submit, the translation key button.submit is used. Similarly, for the button Cancel, the translation key button.cancel is used. The nesting of translation keys is not restricted to a single level, it can be extended to multiple levels as necessary. However, it's best to keep the nesting to a minimum to avoid making the keys overly complex and difficult to manage.

Now let's see how to use translation files and translation keys to implement localization in React.

As mentioned earlier, in neeto, the i18next and react-i18next libraries are used for localization. Both these libraries provide a translation function named t that takes a translation key as an argument and returns the corresponding translated string from the translation file.

The t function provided by i18next is a generic translation function that can be used in any part of your JavaScript application. On the other hand, the t function offered by react-i18next is intended exclusively for usage within the React components and hooks. It can be accessed via the useTranslation hook.

react-i18next is essentially a wrapper over the i18next engine. It offers these additional facilities:

• Language switching: The useTranslation hook provided by react-i18next simplifies the process of language switching by providing access to the i18n instance. This powerful hook not only streamlines the switch but also ensures that translations are promptly updated by triggering an automatic re-render of the component whenever the language is changed.

  const { i18n } = useTranslation();
  i18n.changeLanguage("en-US");
  

• Namespace for loading translations on demand: As your project expands, it becomes essential to implement both code splitting and on-demand translation loading. Loading all translations upfront can result in suboptimal load times for your website. By using the namespace feature provided by the useTranslation hook, you can efficiently organize your translations into separate files based on logical divisions or components. This enables you to dynamically load translations when they are required, instead of loading all translations simultaneously. This approach significantly improves load times, ensuring a smoother user experience.

  // the t function will be set to that namespace as default
  const { t } = useTranslation("ns1");
  t("key"); // will be looked up from namespace ns1
  

• Trans component for complex React elements: Apart from the useTranslation hook, react-i18next offers a powerful component called Trans. This component can be used for translating strings that contain HTML or React nodes. We will see more about this component later in this blog.

Now, let's take an example to see how these libraries can be used to implement localization in React. Consider a simple online store application that displays a welcome message to the customer and our goal is to show this message in both English and Spanish based on the customer's language preference.

For this, first you need to create a translation file for each language that you want to support. In this case, you need to create two translation files: one for English and one for Spanish.

// en.json
{
  "welcomeToOnlineStore": "Welcome to our online store!"
}

// es.json
{
  "welcomeToOnlineStore": "¡Bienvenidos a nuestra tienda en línea!"
}

Next, you need to initialize i18next and react-i18next in your application.

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import en from "../translations/en.json";
import es from "../translations/es.json";

i18n.use(initReactI18next).init({
  resources: { en: { translation: en }, es: { translation: es } },
  fallbackLng: "en",
});

export default i18n;

In this step, the i18next and react-i18next libraries are imported and initialized with the translation files created in the first step. Additionally, the fallback language is set to English. This means that if a translation is not available for the current language, the translation for English will be used instead.

Now you can use the t function to translate strings as shown below.

import { useTranslation } from "react-i18next";

const WelcomeMessage = () => {
  const { t } = useTranslation();

  return <div>{t("welcomeToOnlineStore")}</div>;
};

export default WelcomeMessage;

Here, if the current language is English, the translated string for the welcomeToOnlineStore key will be Welcome to our online store!. If the current language is Spanish, the translated string will be ¡Bienvenidos a nuestra tienda en línea!. If the current language is any other language, the translated string will be Welcome to our online store! since translation resources have not been provided for other languages and the fallback language is set to English.

At this point, you might be wondering how to set the current language in your application. This is accomplished by using the i18next language detector. The i18next language detector is a library that detects the current language of the user's browser and sets it as the current language in your application. To use the i18next language detector, you need to install the i18next-browser-languagedetector package and initialize it in your application. To initialize it you can modify the code snippet that you saw earlier for initializing i18next and react-i18next as shown below.

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";

import en from "../translations/en.json";
import es from "../translations/es.json";

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: { en: { translation: en }, es: { translation: es } },
    fallbackLng: "en",
  });

export default i18n;

Now that you have gained a fundamental understanding of how to use i18next and react-i18next to implement localization in your React applications. Let's now explore the best practices followed at neeto for localization.

Best Practices followed at Neeto for localization

At neeto, a set of best practices has been developed for localization, which has proven effective in improving code quality and maintainability. To ensure that these best practices are consistently followed, a corresponding set of ESLint rules has been created. These ESLint rules are available in the eslint-plugin-neeto package. eslint-plugin-neeto is an ESLint plugin that contains a set of ESLint rules that enforce the best practices followed at neeto. Let us now see the rules that are available in eslint-plugin-neeto for localization, along with the motivations behind their creation.

hard-coded-strings-should-be-localized

If a developer misses hard-coded strings that should be localized, it can result in a mix of localized and non-localized strings within the application. This can create inconsistent user experience, where some strings are correctly translated and others are not. To avoid this scenario, we have created the hard-coded-strings-should-be-localized eslint rule. This rule helps to ensure that all hard-coded strings that should be localized are indeed localized.

no-missing-localization

This rule detects localization keys that do not have an associated value in the translation file. In other words, if a translation key passed to the t function is not present in any of the translation files, this rule will flag it as an error. This ensures that all localized strings are properly translated, thereby avoiding any inconsistencies that can negatively impact the user experience. Moreover, it reduces the risk of errors and bugs caused by missing translations.

no-multiple-translation-functions-under-same-parent

This rule prevents the usage of multiple translation functions under the same JSX parent. The goal is to prevent breaking up sentences into multiple parts using multiple translation keys, which can be problematic when translating from one language to another because the order of words may change. For instance, adjectives in English typically come before the noun they modify, whereas in Spanish, they usually come after the noun.

Let's consider an example to understand this better. Suppose the sentence I have a {color} car need to be translated in the below example, where color is a variable that can have different values.

const CarInfo = ({ color }) => <div>I have a {color} car</div>;

The first thought that comes to mind is to use three translation keys, one for I have a, one for car, and one for the value of the color variable. This would result in the following code:

import { useTranslation } from "react-i18next";

const CarInfo = ({ color }) => {
  const { t } = useTranslation();

  return (
    <div>
      {t("iHaveA")} {t(color)} {t("car")}
    </div>
  );
};

Here, the translation file for English will be:

{
  "iHaveA": "I have a",
  "car": "car",
  "red": "red"
}

And the translation file for Spanish will be:

{
  "iHaveA": "Tengo un",
  "car": "coche",
  "red": "rojo"
}

If the variable color has the value red, the translated sentence in Spanish will be Tengo un rojo coche. However, this translation is incorrect since the adjective rojo (red) precedes the noun coche (car), which goes against the usual word order in Spanish. As previously mentioned, adjectives in Spanish typically come after the noun they modify. Hence, the correct translation of the sentence in Spanish would be Tengo un coche rojo. Now let's see how to solve this issue.

To address this problem, you can use the interpolation feature in i18next.

The interpolation is a feature that allows us to insert dynamic values into the translated string. In this case, the interpolation feature can be used to insert the value of the color variable into the translated string. The interpolation feature is implemented using the {{}} syntax. The variable name is placed inside the {{}} syntax, and the value of the variable is passed as an object to the t function. Let's modify the above example to use the interpolation feature.

import { useTranslation } from "react-i18next";

const CarInfo = ({ color }) => {
  const { t } = useTranslation();

  return <div>{t("iHaveACar", { color: t(color) })}</div>;
};

Here, the translation file for English will be:

{
  "iHaveACar": "I have a {{color}} car",
  "red": "red"
}

And the translation file for Spanish will be:

{
  "iHaveACar": "Tengo un coche {{color}}",
  "red": "rojo"
}

In this case, the Spanish translation would be Tengo un coche rojo, which is correct. As you can see here, with the interpolation feature, you have the flexibility to adjust the word order in the translated sentence by modifying the placement of the variable based on the language. This is not possible when breaking up the sentence into multiple parts.

In short, you should avoid breaking up sentences into multiple parts using multiple translation keys. i18next offers various methods to accomplish this, and interpolation is one of them. Another scenario where you should avoid breaking up sentences into multiple parts is when the sentence contains HTML or React elements. In such cases, you can use the Trans component, which will be explained in detail later in this blog post.

no-translation-functions-in-string-interpolation

This rule ensures that translation functions are not used inside the string interpolation. The goal of this rule is also same as the previous rule, which is to prevent breaking up sentences into multiple parts. However, this rule applies to string interpolation instead of JSX.

use-trans-components-and-values-prop

Before delving into the details of this rule, let's familiarize ourselves with the Trans component offered by react-i18next. The Trans component is helpful when translating text containing React or HTML nodes. However, it's important to note that it may not be necessary in many cases. If your translation doesn't involve React or HTML nodes, you can simply use the standard t function. The t function is sufficient for most cases and is easier to use than the Trans component.

Now let's see an example where you need to use Trans component. Suppose you want to translate the following sentence:

const ClickHereForMore = () => (
  <div>
    Click <a href="www.neeto.com">here</a> for more information.
  </div>
);

If you use the standard t function, you would need to use three translations keys as shown below:

import { useTranslation } from "react-i18next";

const ClickHereForMore = () => {
  const { t } = useTranslation();

  return (
    <div>
      {t("click")} <a href="www.neeto.com">{t("here")}</a>{" "}
      {t("forMoreInfomation")}
    </div>
  );
};

But you know that splitting sentences into multiple parts using multiple translation keys can be problematic when translating from one language to another. So, how can the above sentence be translated without splitting it into multiple parts? This is where the Trans component comes in handy.

Here's how to use Trans component to translate the same sentence:

import { Trans } from "react-i18next";

const ClickHereForMore = () => (
  <Trans
    components={{ a: <a href="www.neeto.com" /> }}
    i18nKey="clickHereMessage"
  />
);

The translation file for English would look like this:

{
  "clickHereMessage": "Click <a>here</a> for more information."
}

As shown in the example above, the Trans component enables us to translate entire sentences that include HTML or React nodes without breaking them into multiple parts.

There are two ways to use Trans component.

Approach 1

import { Trans } from "react-i18next";

const ClickHereForMore = ({ productName }) => (
  <div>
    <Trans i18nKey="clickHereMessage">
      Click <a href="www.neeto.com">here</a> to know more about the{" "}
      {productName}
    </Trans>
  </div>
);

The translation file for English would look like this:

{
  "clickHereMessage": "Click <1>here</1> to know more about the <3>"
}

This approach, known as the indexed nodes approach, uses indexes to map the nodes and variables. Here you need to pass the string to be translated as a child of the Trans component. The Trans component will then map the nodes and variables to indexes. In the above code, Click is mapped to index 0, the anchor tag is mapped to index 1, the string to know more about the is mapped to index 2, and the productName variable is mapped to index 3. So if you want to wrap the here text with anchor tag in the translation file, you would need to use <1> and </1> tags. Similarly for the productName variable, you would need to use <3> tag. However, this approach is not recommended because it requires looking at both the code and the translation file to understand the mapping, making it difficult to read and maintain.

Approach 2

import { Trans } from "react-i18next";

const ClickHereForMore = ({ productName }) => (
  <div>
    <Trans
      components={{ a: <a href="www.neeto.com" /> }}
      i18nKey="clickHereMessage"
      values={{ productName }}
    />
  </div>
);

The translation file for English would look like this:

{
  "clickHereMessage": "Click <a>here</a> to know more about the {{productName}}"
}

This approach, known as the named nodes approach, uses the components prop and values prop to map the nodes and variables. In the above code, the anchor tag is mapped using the components prop, and the productName variable is mapped using the values prop. As you can see here, the named nodes approach is more readable and less prone to errors than the indexed nodes approach because it eliminates the need for guessing indexes.

So the purpose of the use-trans-components-and-values-prop rule is to enforce the usage of the named nodes instead of the indexed nodes in the Trans component.

use-components-children-prop-in-trans

Now that the rationale behind using the Trans component and its usage has been explained, let's delve into another challenge encountered when using Trans with neetoUI components. neetoUI is an npm package that drives the user experience across all the Neeto products. To illustrate the problem, let's consider the following example:

import { Button } from "@bigbinary/neetoui";

const ClickHereForMore = () => (
  <div>
    Click <Button href="www.neeto.com" label="here" /> for more information.
  </div>
);

Here, the Button component accepts the content string via label prop. But, Trans component doesn't support injecting translation keys via some custom prop like this. To localize this, you would have no other way but to break the sentence like this:

import { Button } from "@bigbinary/neetoui";
import { Trans } from "react-i18next";

const ClickHereForMore = () => (
  <Trans
    i18nKey="clickHereMessage"
    components={{
      Button: <Button href="www.neeto.com" label={t("here")} />,
    }}
  />
);

The translation file for English would look like this:

{
  "here": "here",
  "clickHereMessage": "Click <Button /> for more information."
}

As you can see here, you are forced to use one key for the whole message and another one for the Button label. This is not a good practice, as it involves using multiple translation keys for a single sentence.

To tackle this problem, support for the children prop has been incorporated into neetoUI components in order to render the label. With this enhancement, the code can be rewritten as follows:

import { Button } from "@bigbinary/neetoui";
import { Trans } from "react-i18next";

const ClickHereForMore = () => (
  <Trans
    components={{ Button: <Button href="www.neeto.com" /> }}
    i18nKey="clickHereMessage"
  />
);

The translation file for English would look like this:

{
  "clickHereMessage": "Click <Button>here</Button> for more information."
}

Now, as you can see, here only one key is used for the entire message which makes it easier to manage. Therefore, this rule ensures that the children prop of neetoUI components is used instead of the label prop when used with the Trans component

use-translation-hook-in-components

There are two options for translating content in React components: using the translation function from i18next and using the translation function from the useTranslation hook provided by the react-i18next package. While both options work, it is recommend using the translation function from the useTranslation hook due to the advantages it offers, which were discussed earlier.

So this rule is to enforces the use of the translation function from the useTranslation hook in React components.

use-i18next-plurals

This rule enforces the use of i18next's built-in plurals for pluralization. Before delving into i18next's built-in plurals, let's take a look at other commonly used approaches for pluralization.

Approach 1

In this approach, a single key is utilized for both the singular and plural forms.

import { useTranslation } from "react-i18next";

const MembersInfo = ({ count }) => {
  const { t } = useTranslation();

  return <div>{t("membersWithCount", { count })}</div>;
};

The translation file for English would look like this:

{
  "membersWithCount": "{{count}} member(s)"
}

Approach 2

This approach uses two separate keys, one for the singular form and one for the plural form, and conditionally renders the appropriate key based on the count variable.

import { useTranslation } from "react-i18next";

const MembersCount = ({ count }) => {
  const { t } = useTranslation();

  return (
    <div>
      {count === 1
        ? t("memberWithCount", { count })
        : t("membersWithCount", { count })}
    </div>
  );
};

The translation file for English would look like this:

{
  "memberWithCount": "{{count}} member",
  "membersWithCount": "{{count}} members"
}

However, these approaches are not recommended because they are lazy or hacky way of approaching the problem. The recommended approach is to use i18next's built-in pluralization features, which allow for greater flexibility and consistency in translation.

Let's see how to use i18next's built-in pluralization feature. In this approach, two keys are used: one for the singular form and one for the plural form. The key for the singular form is suffixed with _one, and the key for the plural form is suffixed with _other. This is how i18next's built-in pluralization works. But in this case you don't need to worry about selecting the appropriate key based on the count variable. i18next will automatically select the appropriate key based on the count variable.

import { useTranslation } from "react-i18next";

const MembersInfo = ({ count }) => {
  const { t } = useTranslation();

  return <div>{t("memberWithCount", { count })}</div>;
};

The translation file for English would look like this:

{
  "memberWithCount_one": "{{count}} member",
  "memberWithCount_other": "{{count}} members"
}

In this example, if the count is 1, then the key memberWithCount_one will be used, and if the count is greater than 1, then the key memberWithCount_other will be used.

_one and _other are not the only available keys, there are also other keys available. Please refer to Plurals documentation on how to use them.

As per the Neeto standards, we add the WithCount prefix only if we want to display the count in the string. If all we want is to get the plural or singular words conditionally, the keys will be:

"member_one": "member",
"member_other": "members"

use-pluralize-package

At neeto, it is highly recommended to use i18next's built-in plurals feature for pluralizing words. However, in certain situations, the use of external packages like pluralize may be necessary. One such example is when dealing with user inputs, which can't be anticipated beforehand and hence won't have a corresponding translation key in our translation files. In such cases, the pluralize package can be used for pluralization.

However, we observed that different projects were using different pluralization packages, and some projects even developed their own custom pluralization functions. This resulted in a lack of consistency within the codebase. To address this issue, a unified approach was implemented, mandating the use of a single pluralization package across all projects. After careful consideration, the pluralize package was selected as it is the most popular pluralization package in the JavaScript ecosystem.

So this rule is to enforces the use of the pluralize package.

Script prepared to remove unused translations keys

Another problem faced was the accumulation of unused keys in the translation files. This situation often occurred when removing unused code without deleting the corresponding translation keys associated with the removed code. As a result, the translation files became bloated with a significant number of unused keys, making it challenging to maintain them effectively.

To solve this problem, a script was developed to remove unused translation keys from the translation files. This script is added in neeto-commons-frontend package. neeto-commons-frontend is a package encapsulating common code across Neeto projects.

How does this script work? Let us see it with the help of an example. Consider the following translation file:

{
  "hello": "Hello",
  "button": {
    "save": "Save"
  }
}

This script will check if the translation key hello is used in the codebase or not and if not, it will remove the translation key hello from the translation file. Similarly, it will check if the translation key button.save is used in the codebase or not and if not, it will remove the translation key button.save from the translation file.

However, an additional challenge surfaced due to the usage of interpolated strings as translation keys in specific scenarios. For instance, consider the following code snippet:

import { useTranslation } from "react-i18next";

const Button = ({ buttonType }) => {
  const { t } = useTranslation();
  const buttonType = "save";

  return <div>{t(`button.${buttonType}`)}</div>;
};

Here, since the translation key is not a simple string, checking if it's used in the codebase became complicated because of searching for the translation key button.save in the codebase won't return any results, and hence the script will remove the translation key button.save from the translation file. But in this case, the translation key button.save is used in the codebase.

To address this issue, we've made an improvement to the script. It now has a built-in capability to detect translation functions that use interpolated translation keys. These identified translation functions are then included in a section for manual verification at the end of the script. So, once the script has finished running, you should manually analyze the identified translation functions to ensure that the translation keys used in them are present in the translation file. If any of these translation keys have been removed during the initial step, they should be added back to the translation file.

Below is the demo of the script in action:

That's all for now. We hope you found this blog useful. Our goal was to provide valuable insights that can help you with your localization journey. By learning from our experiences and applying these strategies, we believe you will be better equipped to handle the challenges of localization.

The need for standardization

Before we delve into how we've standardized keyboard shortcuts, it's important to understand why we felt the need to do so. With multiple products under the Neeto ecosystem, each product team was implementing keyboard shortcuts functionality in their own way. This led to several problems:

• Cross-platform browser problems

  Some products use react-hotkeys and some use react-hotkeys-hook for keyboard shortcuts. And some create their custom hooks to handle keyboard shortcuts. However, the issue with all three approaches is that developers may miss adding alternative hotkeys for operating systems that are different from their development machine.

  Furthermore, OS-based key translation behavior is inconsistent. For instance, one product may use the combination option + s for Mac and alt + s for Windows, while another product may use option + s for Mac and ctrl + s for Windows. Such inconsistencies degrade the user experience when users switch between operating systems.

• Difference in UI for listing all shortcuts

  Each product displayed shortcuts differently. Some used react-hotkeys built-in feature, while others created separate pages, modals, or tooltips to show hotkeys. We wanted consistent behavior across all products in Neeto.

• Difficulty finding and modifying registered hotkeys in the codebase

  There was no standard convention on how/where to keep hotkey data. Some products have created a file to store all the hotkeys & related info, and some have their own conventions. When a developer is transferred from one product to another, they find it hard to adapt to the new conventions over there. We wanted consistency in code structuring as well for all products in Neeto.

To fix all these problems, we decided to bring in some code conventions and extract the common code to an npm package so that it can be reused in all products consistently.

Components and hooks created for standardization

We introduced a custom hook to run a specified function when the associated hotkey is fired. We also built a side pane component to display the list of all shortcuts.

ShortcutsPane

ShortcutsPane is a React component that displays all the keyboard shortcuts in the product. It belongs to neeto-molecules package to enable code reuse. Users can open/close the shortcuts pane by clicking on the Keyboard shortcuts icon in the sidebar or pressing a hotkey shift+/.

This is how the pane looks:

This is how the component is integrated into the products:

<KeyboardShortcuts.Pane productShortcuts={SHORTCUTS}>

We include KeyboardShortcuts.Pane in the Main component, which, as per Neeto standards, is the topmost parent component. Here, SHORTCUTS constant contains the product-specific custom shortcuts. We have set a convention to define it in a file named constants/keyboardShortcuts.js. productShortcuts prop is optional and it can be omitted if a product doesn't have any custom shortcuts.

Given below is the sample structure of the keyboardShorcuts.js file.

export const CATEGORY_NAMES = {
  messenger: "MESSENGER",
  settings: "SETTINGS",
};

export const SHORTCUTS = {
  [CATEGORY_NAMES.messenger]: {
    addNewLine: {
      sequence: "shift+return",
      description: "Add new line",
    },
    sendMessage: {
      sequence: "return",
      description: "Send message",
    },
    addEmoji: {
      sequence: "command+option+e",
      description: "Add emoji",
    },
    closeConversation: {
      sequence: "command+option+y",
      description: "Close conversation",
    },
  },
  [CATEGORY_NAMES.settings]: {
    addPlaceholder: {
      sequence: "command+option+t",
      description: "Add placeholder",
    },
  },
};

Because of this consistency, the developers moving from one Neeto product to another Neeto product would find it easy to identify and make changes to the product shortcuts.

When SHORTCUTS is passed into KeyboardShortcuts.Pane, it will be merged with the common keyboard shortcuts list. The common list will contain shortcuts like open/close pane, close modals, submit form, etc that apply to all products. Developers have to pass the hotkey for MacOs and the component will take care of identifying the user's platform using platform.js and render appropriate platform-specific keys. For example, option will be converted to alt for Windows users.

useHotKeys hook

We wanted a hook that combined the features of both react-hotkeys and react-hotkeys-hook. We wanted all the features of react-hotkeys-hook like their hook style & easy to use API and the sequential mode of react-hotkeys package. So we went with building our own hook named useHotKeys. We added the hook to the package @bigbinary/neeto-commons-frontend. All our reusable hooks, common utility functions, configs, etc reside in this package. Developers will pass a hotkey, a handler function, and an optional configuration object to the hook.

useHotKeys is built using the popular mousetrap.js package. mousetrap.js is a tiny library that helps handle keyboard shortcuts in an application.

Because of the following features of useHotKeys, we can handle most of the shortcut management cases for any application.

• It supports sequential hotkeys. For example, "press s and then r".
• It can bind simultaneous hotkeys. For exampl,e "press s and at the same time press r".
• It can bind single hotkeys eg: return.
• It auto converts a hotkey based on platform eg: command is converted to ctrl on Windows, and the user will only pass the hotkey for macOS.
• It supports enabled config which can be used to enable/disable the hotkey. By default, all hotkeys will be enabled.
• It supports multiple modes of operation as explained below:
  • default: On default mode hotkeys won't be fired if the current focus is on input fields.
  • scoped: The mode scoped is used to restrict a hotkeys handler to a specific DOM element eg: forms.
  • global: global is similar to the default mode. The only difference is that it will fire even if the user is focused on an input field.

The following is an example of using the default mode. Here, the handler handleCloseConversation will be invoked whenever the user presses the close conversation hotkey:

useHotKeys(MESSENGER_SHORTCUTS.closeConversation.sequence, () =>
  setCoversationModalOpen(true)
);

We define constants like MESSENGER_SHORTCUTS in the constants/keyboardShortcuts.js file to make it easier to access sequences and pass them to the useHotKeys hook. It would look something like this:

export const MESSENGER_SHORTCUTS = SHORTCUTS[CATEGORY_NAMES.messenger];

The following is an example of using the scoped mode. When the mode is scoped, useHotKeys will return a React ref that we can attach to the desired element. The handler function will only be invoked when the user presses the hotkey and is focused inside the form, e.g, the input element:

const formRef = useHotKeys(
  MESSENGER_SHORTCUTS.toggleModal.sequence,
  () => setIsModalOpen(isOpen => !isOpen),
  { mode: "scoped" }
);

return (
  <div>
    <form ref={formRef}>
      <input type="text" name="username" />
    </form>
  </div>
);

usePaneState hook

While rolling out these components to products, we noticed that it would be nice if some pages were styled differently when the pane is open. So, we added a hook, usePaneState, that will tell whether the pane is open or not. Pages can use this hook to know the current status of the pane & apply styles accordingly.

Try out any of the neeto products and see the keyboard shortcuts in action for yourself.

In this blog, we will focus on how the memoization of components and proper code splitting help you squeeze the most out of your application. We assume that you have a high-level understanding of how useCallback, useMemo, and React.memo works. If so, let's jump right in.

Initial setup

We'll go through the process of building a website that helps teams manage and discuss customer feedback. The application contains a dashboard where different categories of feedback are organized. The user can easily navigate between each category and view all the feedback classified under it. It's important to note that for the purpose of this blog, we will be focusing on building a dashboard prototype rather than a fully functional application, incorporating a significant amount of demo data.

The dashboard consists mainly of four components. The Header component displays the category of feedback and also lets you easily navigate to other categories. The Category component displays all the feedback related to the selected category. On the right side, the Info section provides personalized details about the user who is currently logged in. All these parts are encapsulated in the App component, creating a cohesive dashboard.

App.jsx

The App component renders the Header and Category components corresponding to the selected category. For the sake of demonstration, we store all the dummy data in the FEEDBACK_CATEGORIES variable. By default, the first category is selected. We shall pass a DEFAULT_USER constant to render the Info component.

import React, { useState } from "react";

import Category from "./Category";
import { DEFAULT_USER, FEEDBACK_CATEGORIES } from "./constants";
import Header from "./Header";
import Info from "./Info";

const App = () => {
  const [selectedCategoryIndex, setSelectedCategoryIndex] = useState(0);
  const totalCategories = FEEDBACK_CATEGORIES.length;
  const category = FEEDBACK_CATEGORIES[selectedCategoryIndex];

  const gotoNextCategory = () => {
    setSelectedCategoryIndex(index => (index + 1) % totalCategories);
  };

  const gotoPrevCategory = () => {
    setSelectedCategoryIndex(
      index => (index + totalCategories - 1) % totalCategories
    );
  };

  return (
    <div className="flex justify-between">
      <div className="w-full">
        <Header
          gotoNextCategory={gotoNextCategory}
          gotoPrevCategory={gotoPrevCategory}
          title={category.title}
        />
        <Category category={category} />
      </div>
      <Info user={DEFAULT_USER} />
    </div>
  );
};

export default App;

Header.jsx

The Header component renders the feedback title and implements pagination for seamless navigation between feedback.

import React from "react";

const Header = ({ title, gotoNextCategory, gotoPrevCategory }) => (
  <div className="flex justify-between p-4 shadow-sm">
    <h1 className="text-xl font-bold">{title}</h1>
    <div className="space-x-2">
      <button
        className="rounded bg-blue-500 py-1 px-2 text-white"
        onClick={gotoPrevCategory}
      >
        Previous
      </button>
      <button
        className="rounded bg-blue-500 py-1 px-2 text-white"
        onClick={gotoNextCategory}
      >
        Next
      </button>
    </div>
  </div>
);

export default Header;

Category.jsx

The Category component displays a list of feedbacks based on selected category, facilitating a bird's-eye view of all the feedbacks.

import React from "react";

const Category = ({ category }) => (
  <div className="mx-auto my-4 w-full max-w-xl space-y-4">
    {category.feedbacks.map(({ id, user, description }) => (
      <div key={id} className="rounded shadow px-6 py-4 w-full">
        <p className="font-semibold">{user}</p>
        <p className="text-gray-600">{description}</p>
      </div>
    ))}
  </div>
);

export default Category;

Info.jsx

The Info component displays the information of the currently logged-in user.

import React from "react";

const Info = ({ user }) => (
  <div className="flex h-screen flex-col bg-gray-100 p-8">
    <p>{user.name}</p>
    <p className="font-semibold text-blue-500">{user.email}</p>
    <button className="text-end mt-auto block text-sm font-semibold text-red-500">
      Log out
    </button>
  </div>
);

export default Info;

Here is a CodeSandbox link for you to jump right in and try out all the changes yourselves.

Profiling and optimizing with React profiler

Now let's have a look at what the React Profiler has to say when we click on the "Next" and "Previous" buttons to navigate between the different feedbacks.

Clearly, every component is re-rendered whenever the user navigates to another feedback. This is not ideal. We can argue that the Info component need not be re-rendered since the user information stays constant across every render. Let us wrap the default export of the Info component with React.memo and see how it improves the performance.

export default React.memo(Info);

It's now clear that subsequent renders use the cached version of the Info component boosting the overall performance.

Let's now explore how we can improve the performance of the Header component further. There is no point in memoizing the Header component itself since the title is updated whenever we navigate to a new category. We can see that the pagination buttons need not re-render whenever we navigate to a new category. Hence, it is possible to extract these buttons into their own component and memoize it to prevent these unnecessary re-renders.

Header.jsx

import React from "react";

import Pagination from "./Pagination";

const Header = ({ title, gotoNextCategory, gotoPrevCategory }) => (
  <div className="flex justify-between p-4 shadow-sm">
    <h1 className="text-xl font-bold">{title}</h1>
    <div className="space-x-2">
      <Pagination
        gotoNextCategory={gotoNextCategory}
        gotoPrevCategory={gotoPrevCategory}
      />
    </div>
  </div>
);

export default Header;

Pagination.jsx

import React from "react";

const Pagination = ({ gotoNextCategory, gotoPrevCategory }) => (
  <>
    <button
      className="rounded bg-blue-500 py-1 px-2 text-white"
      onClick={gotoPrevCategory}
    >
      Previous
    </button>
    <button
      className="rounded bg-blue-500 py-1 px-2 text-white"
      onClick={gotoNextCategory}
    >
      Next
    </button>
  </>
);

export default React.memo(Pagination);

This did not solve the problem. In fact, React.memo did not prevent any unnecessary re-renders. By definition, React.memo lets you skip re-rendering a component when its props are unchanged. After close inspection, you will understand that the references to the gotoNextCategory and gotoPrevCategory functions get updated whenever the App component re-renders. This causes the Pagination component to re-render as well. Here we should use the useCallback hook to cache the function references before passing them as props. This would maintain the referential equality of the functions across renders and let React.memo does its magic.

App.jsx

// Rest of the code

const App = () => {
  // Rest of the code

  const gotoNextCategory = useCallback(() => {
    setSelectedCategoryIndex(index => (index + 1) % totalCategories);
  }, []);

  const gotoPrevCategory = useCallback(() => {
    setSelectedCategoryIndex(
      index => (index + totalCategories - 1) % totalCategories
    );
  }, []);

  // Rest of the code
};

export default App;

Now, you may use the profiler to verify that the Pagination component is not re-rendered unnecessarily.

Let us now introduce a new feature. The users should be able to filter the feedback in a particular category based on a search term. We shall modify the Category component to incorporate it.

Category.jsx

import React, { useState } from "react";

const Category = ({ category }) => {
  const [searchTerm, setSearchTerm] = useState("");

  const filteredFeedbacks = category.feedbacks.filter(({ description }) =>
    description.toLowerCase().includes(searchTerm.toLowerCase().trim())
  );

  return (
    <div className="mx-auto my-4 w-full max-w-xl space-y-4">
      <input
        autoFocus
        className="outline-gray-200 w-full border p-2"
        placeholder="Search feedbacks"
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
      />
      {filteredFeedbacks.map(({ id, user, description }) => (
        <div key={id} className="rounded shadow px-6 py-4 w-full">
          <p className="font-semibold">{user}</p>
          <p className="text-gray-600">{description}</p>
        </div>
      ))}
    </div>
  );
};

export default Category;

From the above code, it is very clear that the individual feedback need not be re-rendered every time the search term is updated. Hence, it would be a good idea to extract it to a Card component and wrap it with React.memo.

Category.jsx

import React, { useState } from "react";

import Card from "./Card";

const Category = ({ category }) => {
  const [searchTerm, setSearchTerm] = useState("");

  const filteredFeedbacks = category.feedbacks.filter(({ description }) =>
    description.toLowerCase().includes(searchTerm.toLowerCase().trim())
  );

  return (
    <div className="mx-auto my-4 w-full max-w-xl space-y-4">
      <input
        autoFocus
        className="outline-gray-200 w-full border p-2"
        placeholder="Search feedbacks"
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
      />
      {filteredFeedbacks.map(({ id, user, description }) => (
        <Card key={id} user={user} description={description} />
      ))}
    </div>
  );
};

export default Category;

Card.jsx

import React from "react";

const Card = ({ user, description }) => (
  <div className="w-full rounded px-6 py-4 shadow">
    <p className="font-semibold">{user}</p>
    <p className="text-gray-600">{description}</p>
  </div>
);

export default React.memo(Card);

If the number of feedback is too large, the calculation of filteredFeedbacks will become expensive. We need to traverse through all the comments one by one and then perform a custom search logic on each comment object. We can use the useMemo hook to cache the results, preventing the same computation across renders boosts the performance further.

Let us verify the React profiler one last time. Clearly, only the Category component re-renders with the new changes, taking the rest of the results from the cache.

To enhance the overall user experience, it's important to reset the search term whenever users navigate to a new category. This can be easily achieved by passing a key prop to the Category component. React will maintain separate component trees for each category, ensuring that the search functionality starts anew in each category.

// Rest of the code

const App = () => {
  // Rest of the code

  return (
    <div className="flex justify-between">
      <div className="w-full">
        <Header
          title={feedback.title}
          gotoNextCategory={gotoNextCategory}
          gotoPrevCategory={gotoPrevCategory}
        />
        <Category key={category.id} category={category} />
      </div>
      <Info user={DEFAULT_USER} />
    </div>
  );
};

export default App;

Wrapping up

By breaking down components and utilizing memoization, we have improved the performance of our app significantly. The React Profiler has been instrumental in identifying areas for optimization and validating the effectiveness of our enhancements. With these techniques, you can now build faster and more responsive React applications. Apply these learnings to your projects and elevate your React development skills.

Here is a CodeSandbox link of the optimized website for you to play with.

Shape snapping is a feature in software that allows shapes or objects to be automatically aligned or adjusted to a particular grid when they are moved or resized. This feature helps to ensure that shapes are properly aligned and positioned in relation to other shapes, making it easier to build a design where things are properly aligned.

We needed "shape snapping" in NeetoWireframe. NeetoWireframe is a tool for creating interactive wireframes and prototypes. neetoWirefame is one of the various tools being built by neeto.

NeetoWireframe uses React Konva to build wireframes and prototypes. React Konva is a JavaScript library that provides a React component interface to the Konva library, a powerful 2D drawing library for the web. React Konva enables developers to create and manipulate complex graphics and visualizations in a declarative and efficient way using familiar React patterns. With React Konva, developers can easily create canvas-based applications, animations, interactive games, and rich user interfaces. React Konva is highly customizable and provides many features, such as shapes, animations, event handling, and filters. It is an open-source library and is widely used in web development projects.

Let's see how we implemented snapping shapes while dragging them in the canvas based on the position of other shapes in the canvas.

Setting up the canvas 🖼️

To begin, we will set up the canvas with a few shapes.

import React, { useState } from "react";
import { Stage, Layer, Rect, Circle } from "react-konva";

const SHAPES = [
  {
    id: "1",
    x: 0,
    y: 0,
    height: 100,
    width: 100,
    fill: "red",
    shape: Rect,
  },
  {
    id: "2",
    x: 170,
    y: 150,
    height: 100,
    width: 100,
    fill: "blue",
    shape: Rect,
  },
  {
    id: "3",
    x: 200,
    y: 350,
    height: 100,
    width: 100,
    fill: "black",
    shape: Circle,
  },
  {
    id: "4",
    x: 450,
    y: 250,
    height: 100,
    width: 100,
    fill: "green",
    shape: Circle,
  },
];

export default function App() {
  return (
    <div style={{ width: window.innerWidth, height: window.innerHeight }}>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          {SHAPES.map(({ shape: Shape, ...props }) => (
            <Shape key={props.id} draggable name="shape" {...props} />
          ))}
        </Layer>
      </Stage>
    </div>
  );
}

The name prop is passed to all the Shapes in the canvas with a value of "shape". This helps us to query and find the shapes in the canvas that we need to use for snapping logic.

We have now set up a canvas with a few circles and squares that can be dragged. Link to Codesandbox.

Let’s add a Transformer 📐

In Konva, a Transformer is a node that allows a user to transform or manipulate a selected Konva shape on a canvas. It provides handles for rotating, scaling, and dragging the selected shape.

We add Transformer node to allow the user to apply transformations to the shapes in the canvas. Transformations like translation, scaling and rotations can be triggered on shapes through the provided handles. Also we would be listening to events from transformer nodes for implementing the snapping.

Transformer can be imported from react-konva just like the other nodes. We can add a transformer to the canvas by adding it as a child to the Layer. Be sure to include a reference to both the Transformer and Stage so that we can access them later.

Let's also configure onMouseDown handler for shapes to select the shape and attach it to the transformer whenever we click on them. To unselect when clicking outside of a shape, add an onClick handler in Stage to remove the nodes from the Transformer by validating whether the event target is the Stage node.

export default function App() {
  const stageRef = useRef();
  const transformerRef = useRef();
  return (
    <div style={{ width: window.innerWidth, height: window.innerHeight }}>
      <Stage
        onClick={e =>
          e.target === stageRef.current && transformerRef.current.nodes([])
        }
        ref={stageRef}
        width={window.innerWidth}
        height={window.innerHeight}
      >
        <Layer>
          {SHAPES.map(({ shape: Shape, ...props }) => (
            <Shape
              key={props.id}
              draggable
              name="shape"
              onMouseDown={e => transformerRef.current.nodes([e.currentTarget])}
              {...props}
            />
          ))}
          <Transformer ref={transformerRef} />
        </Layer>
      </Stage>
    </div>
  );
}

Implementing snapping 🪝

Now that we have set up the Transformer. Let's implement snapping. With that feature, when a shape is dragged near another shape, the edges or the center of the dragged shape should automatically align with the edges or the center of the other shape in such a way that they are in the same line.

We will also show horizontal and vertical lines to visualize the snapping.

We will be using dragmove event in the Transformer node to implement snapping.

On dragmove event, we will find the possible snapping lines based on all the shapes on the canvas first.

To get all shapes on the canvas, we can use the find method on the Stage node. We will be using the name prop that we passed to all the shapes to query and get all the shapes in the canvas.

We don't want the selected shape to be considered for snapping. So we will be passing the selected shape as an argument excludedShape to the function.

The getClientRect method on the shape node returns the bounding box rectangle of a node irrespective of it's shape. We will be using that to find the edges and center of each shape.

const getSnapLines = excludedShape => {
  const stage = stageRef.current;
  if (!stage) return;

  const vertical = [];
  const horizontal = [];

  // We snap over edges and center of each object on the canvas
  // We can query and get all the shapes by their name property `shape`.
  stage.find(".shape").forEach(shape => {
    // We don't want to snap to the selected shape, so we will be passing them as `excludedShape`
    if (shape === excludedShape) return;

    const box = shape.getClientRect({ relativeTo: stage });
    vertical.push([box.x, box.x + box.width, box.x + box.width / 2]);
    horizontal.push([box.y, box.y + box.height, box.y + box.height / 2]);
  });

  return {
    vertical: vertical.flat(),
    horizontal: horizontal.flat(),
  };
};

Then we find the snapping points for the selected shape.

The Transformer node creates a shape named back that covers the entire selected shape area. We will be using that to find the snapping edges of the selected shape.

Relative position of the back shape to the Stage node is the same as the selected shape. So we can use the getClientRect method on the back shape to get the bounding box of the selected shape.

const getShapeSnappingEdges = () => {
  const stage = stageRef.current;
  const tr = transformerRef.current;

  const box = tr.findOne(".back").getClientRect({ relativeTo: stage });
  const absPos = tr.findOne(".back").absolutePosition();

  return {
    vertical: [
      // Left vertical edge
      {
        guide: box.x,
        offset: absPos.x - box.x,
        snap: "start",
      },
      // Center vertical edge
      {
        guide: box.x + box.width / 2,
        offset: absPos.x - box.x - box.width / 2,
        snap: "center",
      },
      // Right vertical edge
      {
        guide: box.x + box.width,
        offset: absPos.x - box.x - box.width,
        snap: "end",
      },
    ],
    horizontal: [
      // Top horizontal edge
      {
        guide: box.y,
        offset: absPos.y - box.y,
        snap: "start",
      },
      // Center horizontal edge
      {
        guide: box.y + box.height / 2,
        offset: absPos.y - box.y - box.height / 2,
        snap: "center",
      },
      // Bottom horizontal edge
      {
        guide: box.y + box.height,
        offset: absPos.y - box.y - box.height,
        snap: "end",
      },
    ],
  };
};

From the possible snapping lines and the snapping edges of the selected shape, we will find the closest snapping lines.

We will define a SNAP_THRESHOLD to fix how close the shape should be to the snapping line to trigger a snap. Let's give it a value of 5 pixels. Based on the threshold, we will find the snap lines that can be considered for snapping.

Sorting the snap lines based on the distance between the line and the selected shape will give us the closest snapping lines as the first element in the array.

const SNAP_THRESHOLD = 5;
const getClosestSnapLines = (possibleSnapLines, shapeSnappingEdges) => {
  const getAllSnapLines = direction => {
    const result = [];
    possibleSnapLines[direction].forEach(snapLine => {
      shapeSnappingEdges[direction].forEach(snappingEdge => {
        const diff = Math.abs(snapLine - snappingEdge.guide);
        // If the distance between the line and the shape is less than the threshold, we will consider it a snapping point.
        if (diff > SNAP_THRESHOLD) return;

        const { snap, offset } = snappingEdge;
        result.push({ snapLine, diff, snap, offset });
      });
    });
    return result;
  };

  const resultV = getAllSnapLines("vertical");
  const resultH = getAllSnapLines("horizontal");

  const closestSnapLines = [];

  const getSnapLine = ({ snapLine, offset, snap }, orientation) => {
    return { snapLine, offset, orientation, snap };
  };

  // find closest vertical and horizontal snappping lines
  const [minV] = resultV.sort((a, b) => a.diff - b.diff);
  const [minH] = resultH.sort((a, b) => a.diff - b.diff);
  if (minV) closestSnapLines.push(getSnapLine(minV, "V"));
  if (minH) closestSnapLines.push(getSnapLine(minH, "H"));

  return closestSnapLines;
};

We need the closest snapping lines to be drawn on the canvas. We will be using Line node from react-konva for that. We can add a pair of states to store the coordinates of vertical and horizontal lines.

We will split the closest snapping lines into horizontal and vertical lines and set them in the corresponding states.

const drawLines = (lines = []) => {
  if (lines.length > 0) {
    const lineStyle = {
      stroke: "rgb(0, 161, 255)",
      strokeWidth: 1,
      name: "guid-line",
      dash: [4, 6],
    };
    const hLines = [];
    const vLines = [];
    lines.forEach(l => {
      if (l.orientation === "H") {
        const line = {
          points: [-6000, 0, 6000, 0],
          x: 0,
          y: l.snapLine,
          ...lineStyle,
        };
        hLines.push(line);
      } else if (l.orientation === "V") {
        const line = {
          points: [0, -6000, 0, 6000],
          x: l.snapLine,
          y: 0,
          ...lineStyle,
        };
        vLines.push(line);
      }
    });

    // Set state
    setHLines(hLines);
    setVLines(vLines);
  }
};

Let's combine all the above functions and create a onDragMove handler for the Transformer node.

We will be using the getNodes method on the Transformer node to get the selected shape.

Based on the selected shape and the canvas, we will find the closest snapping lines.

If there are no snapping lines within the SNAP_THRESHOLD, we will clear the lines from the canvas and return from the function.

Otherwise, we will draw the lines on the canvas and calculate the new position of the selected shape based on the closest snapping lines.

const onDragMove = () => {
  const target = transformerRef.current;
  const [selectedNode] = target.getNodes();

  if (!selectedNode) return;

  const possibleSnappingLines = getSnapLines(selectedNode);
  const selectedShapeSnappingEdges = getShapeSnappingEdges();

  const closestSnapLines = getClosestSnapLines(
    possibleSnappingLines,
    selectedShapeSnappingEdges
  );

  // Do nothing if no snapping lines
  if (closestSnapLines.length === 0) {
    setHLines([]);
    setVLines([]);

    return;
  }

  // draw the lines
  drawLines(closestSnapLines);

  const orgAbsPos = target.absolutePosition();
  const absPos = target.absolutePosition();

  // Find new position
  closestSnapLines.forEach(l => {
    const position = l.snapLine + l.offset;
    if (l.orientation === "V") {
      absPos.x = position;
    } else if (l.orientation === "H") {
      absPos.y = position;
    }
  });

  // calculate the difference between original and new position
  const vecDiff = {
    x: orgAbsPos.x - absPos.x,
    y: orgAbsPos.y - absPos.y,
  };

  // apply the difference to the selected shape.
  const nodeAbsPos = selectedNode.getAbsolutePosition();
  const newPos = {
    x: nodeAbsPos.x - vecDiff.x,
    y: nodeAbsPos.y - vecDiff.y,
  };

  selectedNode.setAbsolutePosition(newPos);
};

Finally, let's include the above functions inside the component and attach the onDragMove handler to Transformer.

export default function App() {
  const [hLines, setHLines] = useState([]);
  const [vLines, setVLines] = useState([]);

  const transformerRef = useRef();

  // define onDragMove here

  return (
    <div style={{ width: window.innerWidth, height: window.innerHeight }}>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          {SHAPES.map(({ shape: Shape, ...props }) => (
            <Shape
              onMouseDown={e => transformerRef.current.nodes([e.currentTarget])}
              draggable
              ref={props.shapeRef}
              {...props}
            />
          ))}
          <Transformer ref={transformerRef} onDragMove={onDragMove} />
          {hLines.map((item, i) => (
            <Line key={i} {...item} />
          ))}
          {vLines.map((item, i) => (
            <Line key={i} {...item} />
          ))}
        </Layer>
      </Stage>
    </div>
  );
}

We have successfully implemented snapping functionality in the canvas, allowing the shapes to snap to a specific location while being dragged. You can now try moving the shapes near the edges and center of other shapes to see the snapping in action.

All implementation details and live demo can be found in this CodeSandbox.

NeetoWireframe has not been launched for everyone yet. We are internally using it and are happy with how it’s shaping up. If you want to give it a try, then please send an email to invite@neeto.com.

React Query is a powerful tool that simplifies the data fetching, caching and synchronization with the server by providing a declarative and composable API of hooks. It was created by Tanner Linsley in 2020 and has gained a lot of popularity since then.

It uses a cache-first approach to optimize the user experience by reducing the number of network requests made by the application. React Query also provides built-in support for features like pagination, optimistic updates, and retrying failed requests.

While building neeto we started using React Query and we learned a few things about how to effectively use it. Below are some of the lessons we learned.

Major advantages of using React Query

1. Simplifies data fetching - It erases a lot of boilerplate and makes our code easier to read.

   Here is a comparison of code structure with and without using react-query to fetch data from the server:

   Without React Query:

   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState([]);
   const [error, setError] = useState(null);
   
   useEffect(() => {
     setIsLoading(true);
     (async () => {
       try {
         const data = await fetchPosts();
         setData(data);
       } catch (error) {
         setError(error);
       } finally {
         setIsLoading(false);
       }
     })();
   }, []);
   

   With React Query:

   const { isInitialLoading, data, error } = useQuery(["posts"], fetchPosts);
   

   React Query provides a useQuery hook to fetch data from the server. The entire useEffect was replaced with a single line with React Query. The isInitialLoading, error and the data state is handled out of the box.

2. Provides tools to improve user experience and prevent unnecessary API calls.

   React Query provides a powerful caching mechanism that can help prevent unnecessary API calls by storing the results of API requests in a cache. When a component requests data from the API using React Query, it first checks if the data is already present in the cache. If the data is present and hasn't expired, React Query returns the cached data instead of making a new API call.

   Here's an example:

   Suppose we have a component that displays a list of todos fetched from an API endpoint at https://api.example.com/todos. We can use React Query to fetch the data and store it in the cache like this:

   import { useQuery } from "@tanstack/react-query";
   
   const TodoList = () => {
     const { data, isInitialLoading, isError } = useQuery(
       ["todos"],
       () => axios.get("https://api.example.com/todos"),
       {
         staleTime: 10000, // data considered "fresh" for 10 seconds
       }
     );
   
     if (isInitialLoading) {
       return <div>Loading...</div>;
     }
   
     if (isError) {
       return <div>Error fetching data</div>;
     }
   
     return (
       <ul>
         {data.map(todo => (
           <li key={todo.id}>{todo.title}</li>
         ))}
       </ul>
     );
   };
   export default TodoList;
   

   In this example, useQuery is used to fetch the data from the API endpoint. The first argument to useQuery is a unique key that identifies the query, and the second argument is a function that returns the data by making a request to the API endpoint.

   Now, suppose the user navigates away from the TodoList component and then comes back to it, if the data in the cache hasn't expired, React Query will return the cached data instead of making a new API call, which can help prevent unnecessary network requests.

   If the cache time has expired, React Query will not show the loading state because it will automatically trigger a new API call to fetch the data. During this time, React Query will return the stale data from the cache while it waits for the new data to arrive. This means that our component will continue to display the old data until the new data arrives, but it won't show a loading state because it's not waiting for the data to load.

   Once the new data arrives, React Query will update the cache with the new data and then return the updated data to the component.

3. Request Retries - Ability to retry a request in case of errors.

   React Query provides built-in support for request retries when API requests fail. This can be useful in situations where network connectivity is unreliable, or when the server is under heavy load and returns intermittent errors.

   When we use useQuery or useMutation from React Query, we can provide an optional retry option that specifies the number of times to retry a failed request. Here's an example:

   const { data, isInitialLoading, isError } = useQuery(
     ["todos"],
     () => axios.get("https://api.example.com/todos"),
     {
       retry: 4, // retry up to 4 times
     }
   );
   

   In this example, we're using useQuery to fetch data from an API endpoint. We've set the retry option to 4, which means that React Query will retry the API request up to 4 times if it fails. If the API request still fails after 4 retries, React Query will return an error to our component.

   We can also customize the behavior of request retries by providing a function to the retryDelay option. This function should take the current retry count as an argument and return the number of milliseconds to wait before retrying the request. Here's an example:

   const { data, isInitialLoading, isError } = useQuery(
     ["todos"],
     () => axios.get("https://api.example.com/todos").then(res => res.json()),
     {
       retry: 3, // retry up to 3 times
       retryDelay: retryCount => Math.min(retryCount * 1000, 30000), // wait 30 seconds between retries
     }
   );
   

4. Window Focus Refetching - Refetching based on application tab activity.

   Window Focus Refetching is a feature of React Query that allows us to automatically refetch our data when the user returns to our application's tab in their browser. This can be useful if we have data that changes frequently or if we want to ensure that our data is always up to date.

   React Query will automatically refetch our data when the user returns to our application's tab in their browser. Please note that refetchOnWindowFocus is true by default.

   To disable it, we can do it per query or globally in the query client.

   Disabling per-query:

   useQuery(["todos"], fetchTodos, { refetchOnWindowFocus: false });
   

   Disabling globally:

   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
         refetchOnWindowFocus: false, // default: true
       },
     },
   });
   

How to integrate React Query

1. We can install React Query using npm or yarn. Open the terminal and navigate to the project directory. Then, run one of the following commands:

   Using npm:

    npm install @tanstack/react-query
   

   Using yarn:

    yarn add @tanstack/react-query
   

2. To integrate react query, first we need to wrap it a QueryClientProvider. In the App.jsx file (or whichever is the topmost parent),

   import queryClient from "utils/queryClient";
   import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
   import { QueryClientProvider } from "@tanstack/react-query/reactjs";
   
   const App = () => (
     <QueryClientProvider client={queryClient}>
       <Main />
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   );
   export default App;
   

   ReactQueryDevtools is a great tool for debugging and optimizing our React Query cache. With ReactQueryDevtools, we can view the current state of our queries, including the query status, data, and any errors that may have occurred. We can also view the cache entries and manually trigger queries or invalidate cache entries.

   import { QueryClient } from "@tanstack/react-query";
   
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
         staleTime: 100_000,
       },
     },
   });
   
   export default queryClient;
   

   The queryClient holds the query cache. The query client provider is a React context provider, which allows us to access the client (and thus the cache) without passing it as a prop explicitly. Every time we call useQueryClient() , we get access to this client. The useQuery & useMutation hooks use the query client internally.

   staleTime is the duration until a query transitions from fresh to stale. As long as the query is fresh, data will always be read from the cache only. cacheTime: The duration until inactive queries will be removed from the cache. This defaults to 5 minutes.

   Most of the time, if we want to change one of these settings, it's the staleTime that needs adjusting. We have rarely ever needed to tamper with the cacheTime.

3. React query provides us mainly two hooks to fetch and mutate data: useQuery and useMutation.

   useQuery:

   const { data, isInitialLoading, isError } = useQuery(["todos"], () =>
     axios.get("https://api.example.com/todos")
   );
   

   In this example, we're using useQuery to fetch data from an API endpoint at https://api.example.com/todos. The first argument to useQuery is a unique key that identifies this query. The second argument is a function that returns a promise that resolves to the data we want to fetch.

   The useQuery hook returns an object with three properties: data, isInitialLoading, and isError. In addition to these, useQuery also returns various other properties like isSuccess, isFetching etc and callbacks like onError,onSettled,onSuccess etc. The data property contains the data that was fetched, while isInitialLoading and isError are booleans that indicate whether the data is currently being fetched or if an error occurred while fetching it.

   useMutation:

   import { useQueryClient, useMutation } from "@tanstack/react-query";
   
   const queryClient = useQueryClient();
   
   const { mutate, isLoading } = useMutation(
     data =>
       axios.post("https://api.example.com/todos", {
         body: JSON.stringify(data),
       }),
     {
       onSuccess: () => {
         queryClient.invalidateQueries("todos");
       },
     }
   );
   

   In this example, we're using useMutation to send data to an API endpoint at https://api.example.com/todos using a POST request. The first argument to useMutation is a function that takes the data we want to send and returns a promise that resolves to the response from the API.

   The second argument to useMutation is an options object that allows us to specify a callback onSuccess function to be called when the mutation succeeds. In addition to onSuccess, useMutation provides us various other callbacks such as onError, onMutate,onSettled etc. In this case, we're using the onSuccess option to invalidate the todos query in the queryClient. This will cause the query to be refetched the next time it's requested, so the updated data will be displayed.

The standards we follow at BigBinary

1. The QueryClientProvider is wrapped in the App.jsx file.

2. The queryClient is placed in utils/queryClient.js file and it can set the default values for stale time, cache time etc.

3. We store the query keys in constants/query.js file.

   export const DEFAULT_STALE_TIME = 3_600_000;
   
   export const QUERY_KEYS = {
     WEB_PUSH_NOTIFICATIONS: "web-push-notifications",
     WIDGET_SETTINGS: "widget-settings",
     WIDGET_INSTALLATION_SCRIPT: "widget-installation-script",
   };
   

4. To fetch and mutate data, we can create API hooks in hooks/reactQuery folder and based on the structure of the app, we create folders or files inside this folder. For example, we can have a hooks/reactQuery/settings folder to separate settings-related hooks from other API hooks.

5. React query hook files are named in the format use*Api where * is the specific set of apis we are trying to use.

   For example inside hooks/reactQuery/useIntegrationsApi.js:

   import { prop } from "ramda";
   import { useMutation, useQuery } from "react-query";
   import { DEFAULT_STALE_TIME, QUERY_KEYS } from "src/constants/query";
   
   import integrationsApi from "apis/integrations";
   import queryClient from "utils/queryClient";
   
   const { THIRD_PARTY_APPS } = QUERY_KEYS;
   
   const onMutation = () => queryClient.invalidateQueries(THIRD_PARTY_APPS);
   
   export const useUpdateIntegration = () =>
     useMutation(({ id, options }) => integrationsApi.update(id, options), {
       onSuccess: onMutation,
     });
   
   export const useFetchIntegrations = () =>
     useQuery(THIRD_PARTY_APPS, integrationsApi.fetchThirdPartyApps, {
       staleTime: DEFAULT_STALE_TIME,
       select: prop("thirdPartyApps"),
     });
   

6. We import the api hooks from the use*Api hook we have created and use it in the file we would like to fetch or mutate queries.

   For example:

   import {
     useFetchIntegrations,
     useUpdateIntegration,
   } from "hooks/reactQuery/useIntegrationsApi";
   
   const Integrations = () => {
     const { data: integrationApps, isLoading } = useFetchIntegrations();
     const { mutate: updateIntegration, isLoading: isInstalling } =
       useUpdateIntegration();
   
     return (
       <div>
         <DataTable data={data} />
       </div>
     );
   };
   export default Integrations;
   

At BigBinary, we are using React Query v3. Since the update from v3 to v4, there has been some breaking changes. For more information, refer: Documentation

React 18 adds automatic batching for all use cases to improve performance even further. Now, React batches state updates in React events handlers, promises, setTimeout, native event handlers and so on.

Let's jump into an example to understand different use cases of batching.

In these examples we are assuming that you already replaced render with createRoot API. Automatic batching only works with createRoot API. Please check this discussion to learn more about replacing render with createRoot.

We're using simplest example, also used in the original discussion of this change.

React event handlers

const App = () => {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  const handleClick = () => {
    setCount(count + 1);
    setFlag(!flag);
  };

  return (
    <div>
      <button onClick={handleClick}>Click here!</button>
      <h1>{count}</h1>
      <h1>{`${flag}`}</h1>
    </div>
  );
};

Note - React automatically batched all state updates inside event handlers even in previous versions.

After fetch call

const handleClick = () => {
  fetch("URL").then(() => {
    setCount(count + 1);
    setFlag(!flag);
  });
};

In setTimeout

const handleClick = () => {
  setTimeout(() => {
    setCount(count + 1);
    setFlag(!flag);
  }, 1000);
};

Native event handlers

const el = document.getElementById("button");
el.addEventListener("click", () => {
  setCount(count + 1);
  setFlag(!flag);
});

In each of the above case, both state update calls will be batched by React and performed together at once. This avoids re-rendering component with partially updated state in any event.

In some cases, where we do not wish to batch state updates, we can use flushSync API from react-dom. This is mostly useful when one updated state is required before updating another state.

import { flushSync } from "react-dom";

const handleClick = () => {
  flushSync(() => {
    setCounter(count + 1);
  });

  flushSync(() => {
    setFlag(!flag);
  });
};

Using flushSync can be used to fix breaking changes when upgrading to React 18. There are chances that in earlier versions of React we might be using one updated state before updating other states. Simple solution is to wrap all such state updates inside individual flushSync API.

For more detailed information on automatic batching, head to this discussion.

Below is my talk from React Day Bangalore that aims at figuring out some common patterns and design decisions on when and where to use React error boundaries for a fault tolerant React application.

Useful links

• Talk Slides
• New lifecycle method: getDerivedStateFromError [reddit]
• react-error-boundary

Though it improves the performance of an application, many issues have been reported due to the event delegation on the document node.

To demonstrate one of the issues let's take an example of a select dropdown.

CountryDropDown in the below example is a React component for country selection, which would be rendered to a div with id react-root. The react DOM container is wrapped inside a div with id main that has a change event containing stopPropagation().

<!--Div's change event contains stopPropagation()-->
<div id="main">
  <!--Div where react component will be rendered -->
  <div id="react-root"></div>
</div>

class CountryDropDown extends React.Component {
  state = {
    country: '',
  }
  const handleChange = e => {
    this.setState({ country: e.target.value });
  }
  render() {
    return (
      <table class="table table-striped table-condensed">
        <thead>
          <tr>
            <th>Country</th>
            <th>Selected country</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <select value={this.state.country}
                onChange={this.handleChange}
              >
                <option value="">--Select--</option>
                <option value="India">India</option>
                <option value="US">US</option>
                <option value="Dubai">Dubai</option>
              </select>
            </td>
            <td>
              {this.state.country}
            </td>
          </tr>
        </tbody>
      </table>
    );
  }
}
ReactDOM.render(<CountryDropDown />, document.getElementById('react-root'));

Attaching change event to the main div

document.getElementById("main").addEventListener(
  "change",
  function (e) {
    e.stopPropagation();
  },
  false
);

When a country is selected, we cannot see the selected country. Watch this video

Watch on YouTube

to see it in action.

The reason for this unexpected behavior is the onChange event of dropdown which is attached to the document node. The change event of the main div containing e.stopPropagation() prevents the onChange event of dropdown.

To fix such issues, React 17 no longer attaches event handlers at the document level. Instead, it attaches them to the root DOM container into which React tree is rendered.

Image is taken from React 17 blog.

Changes in React 17

After changes in React 17, events are attached to the root DOM container into which the React tree is rendered. In our example, onChange event of dropdown would be attached to the div with id react-root. This event would be triggered when any country is selected rendering the expected behavior.

Watch on YouTube

Note

React 17 release candidate can be installed from here.

Check out the earlier discussion on event delegation here and the pull request here.

HigherOrderComponents are also written as HOC. Going forward we will use HOC to refer to higher-order components.

Using Recompose in an e-commerce application

We are working on an e-commerce application and we need to build payment page. Here are the modes of payment.

• Online
• Cash on delivery
• Swipe on delivery

We need to render our React components depending upon the payment mode selected by the user. Typically we render components based on some state.

Here is the traditional way of writing code.

state = {
  showPayOnlineScreen: true,
  showCashOnDeliveryScreen: false,
  showSwipeOnDeliveryScreen: false,
}

renderMainScreen = () => {
  const { showCashOnDeliveryScreen, showSwipeOnDeliveryScreen } = this.state;

  if (showCashOnDeliveryScreen) {
    return <CashOnDeliveryScreen />;
  } else if (showSwipeOnDeliveryScreen) {
    return <SwipeOnDeliveryScreen />;
  }
  return <PayOnlineScreen />;
}

 render() {
  return (
    { this.renderMainScreen() }
  );
 }

We will try to refactor the code using the tools provided by Recompose.

In general, the guiding principle of functional programming is composition. So here we will assume that the default payment mechanism is online. If the payment mode happens to be something else then we will take care of it by enhancing the existing component.

So to start with our code would look like this.

state = {
  paymentType: online,
}

render() {
  return (
    <PayOnline {...this.state} />
  );
}

First let's handle the case of payment mode CashOnDelivery.

import { branch, renderComponent, renderNothing } from 'recompose';
import CashScreen from 'components/payments/cashScreen';

const cashOnDelivery = 'CASH_ON_DELIVERY';

const enhance = branch(
  (props) => (props.paymentType === cashOnDelivery)
  renderComponent(CashScreen),
  renderNothing
)

Recompose has branch function which acts like a ternary operator.

The branch function accepts three arguments and returns a HOC. The first argument is a predicate which accepts props as the argument and returns a Boolean value. The second and third arguments are higher-order components. If the predicate evaluates to true then the left HOC is rendered otherwise the right HOC is rendered. Here is how branch is implemented.

branch(
  test: (props: Object) => boolean,
  left: HigherOrderComponent,
  right: ?HigherOrderComponent
): HigherOrderComponent

Notice the question mark in ?HigherOrderComponent. It means that the third argument is optional.

If you are familiar with Ramda then this is similar to ifElse in Ramda.

renderComponent takes a component and returns an HOC version of it.

renderNothing is an HOC which will always render null.

Since the third argument to branch is optional, we do not need to supply it. If we don't supply the third argument then that means the original component will be rendered.

So now we can make our code shorter by removing usage of renderNothing.

const enhance = branch(
  (props) => (props.paymentType === cashOnDelivery)
  renderComponent(CashScreen)
)

const MainScreen = enhance(PayOnlineScreen);

Next condition is handling SwipeOnDelivery

SwipeOnDelivery means that upon delivery customer pays using credit card using Square or a similar tool.

We will follow the same pattern and the code might look like this.

import { branch, renderComponent } from 'recompose';
import CashScreen from 'components/payments/CashScreen';
import PayOnlineScreen from 'components/payments/PayOnlineScreen';
import CardScreen from 'components/payments/CardScreen';

const cashOnDelivery = 'CASH_ON_DELIVERY';
const swipeOnDelivery = 'SWIPE_ON_DELIVERY';

let enhance = branch(
  (props) => (props.paymentType === cashOnDelivery)
  renderComponent(CashScreen),
)

enhance = branch(
  (props) => (props.paymentType === swipeOnDelivery)
  renderComponent(CardScreen),
)(enhance)

const MainScreen = enhance(PayOnlineScreen);

Extracting out predicates

Let's extract predicates into their own functions.

import { branch, renderComponent } from "recompose";
import CashScreen from "components/payments/CashScreen";
import PayOnlineScreen from "components/payments/PayOnlineScreen";
import CardScreen from "components/payments/CardScreen";

const cashOnDelivery = "CASH_ON_DELIVERY";
const swipeOnDelivery = "SWIPE_ON_DELIVERY";

// predicates
const isCashOnDelivery = ({ paymentType }) => paymentType === cashOnDelivery;

const isSwipeOnDelivery = ({ paymentType }) => paymentType === swipeOnDelivery;

let enhance = branch(isCashOnDelivery, renderComponent(CashScreen));

enhance = branch(isSwipeOnDelivery, renderComponent(CardScreen))(enhance);

const MainScreen = enhance(PayOnlineScreen);

Adding one more payment method

Let's say that next we need to add support for Bitcoin.

We can use the same process.

const cashOnDelivery = "CASH_ON_DELIVERY";
const swipeOnDelivery = "SWIPE_ON_DELIVERY";
const bitcoinOnDelivery = "BITCOIN_ON_DELIVERY";

const isCashOnDelivery = ({ paymentType }) => paymentType === cashOnDelivery;

const isSwipeOnDelivery = ({ paymentType }) => paymentType === swipeOnDelivery;

const isBitcoinOnDelivery = ({ paymentType }) =>
  paymentType === bitcoinOnDelivery;

let enhance = branch(isCashOnDelivery, renderComponent(CashScreen));

enhance = branch(isSwipeOnDelivery, renderComponent(CardScreen))(enhance);

enhance = branch(isBitcoinOnDelivery, renderComponent(BitcoinScreen))(enhance);

const MainScreen = enhance(PayOnlineScreen);

You can see the pattern and it is getting repetitive and boring. We can chain these conditions together to make it less repetitive.

Let's use the compose function and chain them.

const isCashOnDelivery = ({ paymentType }) => paymentType === cashOnDelivery;

const isSwipeOnDelivery = ({ paymentType }) => paymentType === swipeOnDelivery;

const cashOnDeliveryCondition = branch(
  isCashOnDelivery,
  renderComponent(CashScreen)
);

const swipeOnDeliveryCondition = branch(
  isSwipeOnDelivery,
  renderComponent(CardScreen)
);

const enhance = compose(cashOnDeliveryCondition, swipeOnDeliveryCondition);

const MainScreen = enhance(PayOnlineScreen);

Refactoring code to remove repetition

At this time we are building a condition (like cashOnDeliveryCondition) for each payment type and then using that condition in compose. We can put all such conditions in an array and then we can use that array in compose. Let's see it in action.

const cashOnDelivery = "CASH_ON_DELIVERY";
const swipeOnDelivery = "SWIPE_ON_DELIVERY";

const isCashOnDelivery = ({ paymentType }) => paymentType === cashOnDelivery;

const isSwipeOnDelivery = ({ paymentType }) => paymentType === swipeOnDelivery;

const states = [
  {
    when: isCashOnDelivery,
    then: CashOnDeliveryScreen,
  },
  {
    when: isSwipeOnDelivery,
    then: SwipeOnDeliveryScreen,
  },
];

const componentsArray = states.map(({ when, then }) =>
  branch(when, renderComponent(then))
);

const enhance = compose(...componentsArray);

const MainScreen = enhance(PayOnlineScreen);

Extract function for reusability

We are going to extract some code in utils for better reusability.

// utils/composeStates.js

import { branch, renderComponent, compose } from "recompose";

export default function composeStates(states) {
  const componentsArray = states.map(({ when, then }) =>
    branch(when, renderComponent(then))
  );

  return compose(...componentsArray);
}

Now our main code looks like this.

import composeStates from "utils/composeStates.js";

const cashOnDelivery = "CASH_ON_DELIVERY";
const swipeOnDelivery = "SWIPE_ON_DELIVERY";

const isCashOnDelivery = ({ paymentType }) => paymentType === cashOnDelivery;

const isSwipeOnDelivery = ({ paymentType }) => paymentType === swipeOnDelivery;

const states = [
  {
    when: isCashOnDelivery,
    then: CashScreen,
  },
  {
    when: isSwipeOnDelivery,
    then: CardScreen,
  },
];

const enhance = composeStates(states);

const MainScreen = enhance(PayOnlineScreen);

Full before and after comparison

Here is before code.

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { browserHistory } from "react-router";
import { Modal } from "react-bootstrap";
import * as authActions from "redux/modules/auth";
import PaymentsModalBase from "../../components/PaymentsModal/PaymentsModalBase";
import PayOnlineScreen from "../../components/PaymentsModal/PayOnlineScreen";
import CashScreen from "../../components/PaymentsModal/CashScreen";
import CardScreen from "../../components/PaymentsModal/CardScreen";

@connect(() => ({}), { ...authActions })
export default class PaymentsModal extends Component {
  static propTypes = {
    show: PropTypes.bool.isRequired,
    hideModal: PropTypes.func.isRequired,
    orderDetails: PropTypes.object.isRequired,
  };

  static defaultProps = {
    show: true,
    hideModal: () => {
      browserHistory.push("/");
    },
    orderDetails: {},
  };

  state = {
    showOnlineScreen: true,
    showCashScreen: false,
    showCardScreen: false,
  };

  renderScreens = () => {
    const { showCashScreen, showCardScreen } = this.state;

    if (showCashScreen) {
      return <CashScreen />;
    } else if (showCardScreen) {
      return <CardScreen />;
    }
    return <PayOnlineScreen />;
  };

  render() {
    const { show, hideModal, orderDetails } = this.props;
    return (
      <Modal show={show} onHide={hideModal} dialogClassName="modal-payments">
        <PaymentsModalBase orderDetails={orderDetails} onHide={hideModal}>
          {this.renderScreens()}
        </PaymentsModalBase>
      </Modal>
    );
  }
}

Here is after applying recompose code.

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Modal } from "react-bootstrap";
import { compose, branch, renderComponent } from "recompose";
import * as authActions from "redux/modules/auth";
import PaymentsModalBase from "components/PaymentsModal/PaymentsModalBase";
import PayOnlineScreen from "components/PaymentsModal/PayOnlineScreen";
import CashOnDeliveryScreen from "components/PaymentsModal/CashScreen";
import SwipeOnDeliveryScreen from "components/PaymentsModal/CardScreen";

const cashOnDelivery = "CASH_ON_DELIVERY";
const swipeOnDelivery = "SWIPE_ON_DELIVERY";
const online = "ONLINE";

const isCashOnDelivery = ({ paymentType }) => paymentType === cashOnDelivery;
const isSwipeOnDelivery = ({ paymentType }) => paymentType === swipeOnDelivery;

const conditionalRender = states =>
  compose(
    ...states.map(state => branch(state.when, renderComponent(state.then)))
  );

const enhance = compose(
  conditionalRender([
    { when: isCashOnDelivery, then: CashOnDeliveryScreen },
    { when: isSwipeOnDelivery, then: SwipeOnDeliveryScreen },
  ])
);

const PayOnline = enhance(PayOnlineScreen);

@connect(() => ({}), { ...authActions })
export default class PaymentsModal extends Component {
  static propTypes = {
    isModalVisible: PropTypes.bool.isRequired,
    hidePaymentModal: PropTypes.func.isRequired,
    orderDetails: PropTypes.object.isRequired,
  };

  state = {
    paymentType: online,
  };

  render() {
    const { isModalVisible, hidePaymentModal, orderDetails } = this.props;
    return (
      <Modal
        show={isModalVisible}
        onHide={hidePaymentModal}
        dialogClassName="modal-payments"
      >
        <PaymentsModalBase
          orderDetails={orderDetails}
          hidePaymentModal={hidePaymentModal}
        >
          <PayOnline {...this.state} />
        </PaymentsModalBase>
      </Modal>
    );
  }
}

Functional code is a win

Functional code is all about composing smaller functions together like lego pieces. It results in better code because functions are usually smaller in size and do only one thing.

In coming weeks we will see more applications of recompose in the real world.

In a typical single-page application (SPA) server sends JSON data. Browser receives that JSON data and builds HTML.

In an isomorphic app, the server sends a fully-formed HTML to the browser. This is typically done for SEO, performance and code maintainability.

In an isomorphic app the browser does not directly deal with the API server. This is because the API server will render JSON data and browser needs to have fully formed HTML. To solve this problem a "proxy server" is introduced in between the browser and the API server.

In this case the proxy server is powered by Node.js.

Uploading a file in an isomorphic app

Recently, while working on an isomorphic app, we needed to upload a file to the API server. We couldn't directly upload from the browser because we ran into CORS issue.

One way to solve CORS issue is to add CORS support to the API sever. Since we did not have access to the API server this was not an option. It means now the file must go through the proxy server.

The problem can be seen as two separate issues.

1. Uploading the file from the browser to the proxy server.
2. Uploading the file from the proxy server to the API server.

Implementation

Before we start writing any code, we need to accept file on proxy server and it can be done by using Multer.

Multer is a node.js middleware for handling multipart/form-data.

We need to initialize multer with a path where it will store the uploaded files.

We can do that by adding the following code before initializing the node.js server app.

app
  .set("config", config)
  // ...other middleware
  .use(multer({ dest: "uploads/" }).any()); // add this line

Now any file uploaded to proxy server would be stored in the /uploads directory.

Next we need a function which uploads a file from browser to the node.js server.

// code on client

function uploadImagesToNodeServer(files) {
  const formData = new FormData();
  map(files, (file, fileName) => {
    if (file && file instanceof File) {
      formData.append(fileName, file);
    }
  });

  superagent
    .post("/node_server/upload_path")
    .type("form")
    .set(headers)
    .send(data, formData)
    .then(response => {
      // handle response
    });
}

Next, let's upload the same file from the node.js server to the API server.

To do that, we need to add a callback function to our node.js server where we are accepting the POST request for step 1.

// code on node.js server
app.post("/node_server/upload_path", function (req, res) {
  uploadImagesToApiServer(req);
  // handle response
});

function uploadImagesToApiServer(req) {
  superagent
    .post("/api_server/upload_path")
    .type("form")
    .set(headers)
    .attach("image", req.files[0].path)
    .then(response => {
      // handle response
    });
}

If you are not familiar with ReactJS then please take a look at official ReactJS webpage. You can also look at our Learn ReactJS in steps video series.

What is D3.js

D3.js is a Javascript library used to create interactive, dynamic visualizations.

Let's take a step by step look at how we can integrate ReactJS with D3JS to plot some interactive visualizations.

Step 1 - Get ReactJS example working

We will be using JSFiddle example from ReactJS Docs to begin with. Fork the JSFiddle example and you should be good to go.

Step 2 - Add D3.js as an external resource

We will be using D3.js from Cloudflare CDN. Add D3.js as an external resource as shown in the image given below and type the following URL as an external resource.

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js

Step 3 - Build ReactJS components to create visualizations with D3.js

Now let's try to draw a Line Chart using D3.js.

Let's create a Line component that renders line path for the data points provided.

const Line = React.createClass({
  propTypes: {
    path: React.PropTypes.string.isRequired,
    stroke: React.PropTypes.string,
    fill: React.PropTypes.string,
    strokeWidth: React.PropTypes.number,
  },

  getDefaultProps() {
    return {
      stroke: "blue",
      fill: "none",
      strokeWidth: 3,
    };
  },

  render() {
    let { path, stroke, fill, strokeWidth } = this.props;
    return (
      <path d={path} fill={fill} stroke={stroke} strokeWidth={strokeWidth} />
    );
  },
});

Here in above code, Line component renders an SVG path. Path data d is generated using D3 path functions.

Let's create another component DataSeries that will render Line component for each series of data provided. This generates path based on xScale and yScale generated for plotting a line chart.

const DataSeries = React.createClass({
  propTypes: {
    colors: React.PropTypes.func,
    data: React.PropTypes.object,
    interpolationType: React.PropTypes.string,
    xScale: React.PropTypes.func,
    yScale: React.PropTypes.func,
  },

  getDefaultProps() {
    return {
      data: [],
      interpolationType: "cardinal",
      colors: d3.scale.category10(),
    };
  },

  render() {
    let { data, colors, xScale, yScale, interpolationType } = this.props;

    let line = d3.svg
      .line()
      .interpolate(interpolationType)
      .x(d => {
        return xScale(d.x);
      })
      .y(d => {
        return yScale(d.y);
      });

    let lines = data.points.map((series, id) => {
      return <Line path={line(series)} stroke={colors(id)} key={id} />;
    });

    return (
      <g>
        <g>{lines}</g>
      </g>
    );
  },
});

Here in above code d3.svg.line creates a new line generator which expects input as a two-element array of numbers.

Now we will create LineChart component that will calculate xScale, yScale based on data and will render DataSeries by passing xScale, yScale, data (input x,y values), width, height for the chart.

const LineChart = React.createClass({
  propTypes: {
    width: React.PropTypes.number,
    height: React.PropTypes.number,
    data: React.PropTypes.object.isRequired,
  },

  getDefaultProps() {
    return {
      width: 600,
      height: 300,
    };
  },

  render() {
    let { width, height, data } = this.props;

    let xScale = d3.scale
      .ordinal()
      .domain(data.xValues)
      .rangePoints([0, width]);

    let yScale = d3.scale
      .linear()
      .range([height, 10])
      .domain([data.yMin, data.yMax]);

    return (
      <svg width={width} height={height}>
        <DataSeries
          xScale={xScale}
          yScale={yScale}
          data={data}
          width={width}
          height={height}
        />
      </svg>
    );
  },
});

Here d3.scale.ordinal constructs an ordinal scale that can have discrete domain while d3.scale.linear constructs a linear quantitative scale.

You can learn more about D3 Quantitative scales here.

Now we need to call LineDataSeries component with the data.

let data = {
  points: [
    [
      { x: 0, y: 20 },
      { x: 1, y: 30 },
      { x: 2, y: 10 },
      { x: 3, y: 5 },
      { x: 4, y: 8 },
      { x: 5, y: 15 },
      { x: 6, y: 10 },
    ],
    [
      { x: 0, y: 8 },
      { x: 1, y: 5 },
      { x: 2, y: 20 },
      { x: 3, y: 12 },
      { x: 4, y: 4 },
      { x: 5, y: 6 },
      { x: 6, y: 2 },
    ],
    [
      { x: 0, y: 0 },
      { x: 1, y: 5 },
      { x: 2, y: 8 },
      { x: 3, y: 2 },
      { x: 4, y: 6 },
      { x: 5, y: 4 },
      { x: 6, y: 2 },
    ],
  ],
  xValues: [0, 1, 2, 3, 4, 5, 6],
  yMin: 0,
  yMax: 30,
};

ReactDOM.render(
  <LineChart data={data} width={600} height={300} />,
  document.getElementById("container")
);

An element with id container is replaced with content rendered by LineChart.

If we take a look at the output now, we see how the Line Chart gets plotted.

To build complex visualizations in a modularized fashion, we can use one of the open source libraries mentioned below based on their advantages and disadvantages.

ReactJS + D3.js Open Source Projects

Here are two popular open source ReactJS + D3.JS projects.

react-d3

Pros

• Supports Bar chart, Line chart, Area chart, Pie chart, Candlestick chart, Scattered chart and Treemap.
• Legend support.
• Tooltips support.

Cons

• No support for Animations. You can implement animations using D3 Transitions.
• Only stacked Bar chart support.

react-d3-components

Pros

• Custom scales support.
• Supports Bar chart (Stacked, Grouped), Line chart, Area chart, Pie chart, Scattered chart.
• Tooltips support.

Cons

• No Legend support.
• No support for Animations.

Summary

Below is final working example of JSFiddle built in the post.

View the embedded content