4 Tips for React Developers 2021

What you need to know to become a skilled React Developer

Manusha Chethiyawardhana, Technical writer and Developer

React developers are in high demand all over the world right now. For instance, last six months alone, Job openings in the United Kingdom have grown more than 35% for React developers.

So far, React’s growth is showing no sign of slowing down. As a result, the demand for remote React developers is also increasing. So, becoming a skilled React developer is going to set you up for a get career in 2021.

In this article, I'll summarise the top five things a competent React developer should know in 2021. Let’s get started!

1. How to Use Dependency Injection in React

Dependency injection is a fundamental software design practice that helps to manage the dependency lifecycle of objects and coupling.

In practice, dependency injection is frequently used to inject services such as loggers and translators. Because React has a built-in dependency injection, we can use props to inject dependencies into components.

However, using props is inconvenient when we need to inject a service into a large number of components. So we can use React’s Context to implement dependency injection in our React apps. It also helps to share the state across the component tree without passing it via props.

Consider the following example, in which we inject a translator service into our React component.

import React, { useContext } from "react";const englishMessage = message => { if (message == "Hola, Mundo") { return "Hello, World!"; } return "Can't Translate!"; };const TranslationContext = React.createContext();const Greeting = () => { const translate = useContext(TranslationContext); return <div>{translate("Hola, Mundo")}</div>; };const App = () => ( <TranslationContext.Provider value={englishMessage}> <Greeting /> </TranslationContext.Provider> );

Note: We can also use dependency injection container libraries like Jimple to implement dependency injection in React.

Besides, React components are often dependent on one another. As our application grows in size, we must also use dependency injection to manage these dependencies as well.

One good example is that we can create placeholders for child components and inject them at upper levels without having a deep hierarchy of components. Thus, it perfectly fits for layout components that mainly focus on structure.

2. Lazy Loading

Lazy loading is a must when building scalable React applications. It helps to keep the initial bundle size small, reducing the initial load time and load others on demand.

So, how do we make lazy loading work in React? We put it into action by code-splitting.

The dynamic import syntax is the best way to use code splitting in your application. We can use the React.lazy function to use a dynamic import as a component in React.

React.lazy expects a function that must call a dynamic import(). This must return a Promise pointing to a module with a default export that includes a React component.

The lazy component should then be rendered within a Suspense component, allowing us to display some fallback content (such as a loader) while the component is lazy loaded. React allows you to wrap multiple lazy-loaded components in a single Suspense component.

import React, { Suspense } from 'react';const Events = React.lazy(() => import('./Events')); const Gallery = React.lazy(() => import('./Gallery')); function ArtistComponent() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <section> <Events /> <Gallery /> </section> </Suspense> </div> ); }

Note: React.lazy and Suspense are not yet available for server-side rendering (expected to be included in React 18). Check out the Loadable Components library if you want to do code-splitting in a server-rendered app. It includes a helpful guide for bundle splitting with server-side rendering.

3. JSX Transform

Most React developers use a compiler such as Babel or TypeScript to transform JSX code into regular JavaScript that browsers understand. Therefore, many toolkits, such as Create React App or Next.js, includes a JSX transform for this purpose.

With React 17, a new and improved version of the JSX transform was released. It allows you to use JSX without importing React. Therefore, it reduces the number of React concepts you must learn and may slightly improve your app’s bundle size.

Take a look at the below JSX code,

const Welcome = () => { return <div className="text">Hello, World!</div>; };

This is what it will look like after the old JSX transform converts it to regular JavaScript.

const Welcome = () => { return React.createElement("div", { className: "text", children: "Hello, World!" }); };

This is how it appears with the new JSX transform.

import { jsx as _jsx } from "react/jsx-runtime"; const Welcome = () => { return _jsx("div", { className: "text", children: "Hello, World!" }); };

I recommend that you upgrade to use the new JSX transform. However, if you’re using Create React App, you’ll need v4.0.0 or higher, and Next.js v9.5.3 or higher.

4. How to Deal with “this” Reference Inside a Promise

Trying to access this within a Promise in React is likely to cause problems. One of the issues that could arise, is that resolves as undefined inside the Promise.

import { Component } from 'react'; class MyComponent extends Component { componentDidMount() { axios.get('http://…').then(function(response) { this.setState( { name: response.name } ); }) .catch(function (error) { // handle error }); } }

In the above example, the Axios library is used to make calls to the API to fetch the data. The way this is used, causes this issue.

So how can we solve it?

There are multiple ways to resolve this reference within the Promise. Setting the self = this reference is one possibility.

componentDidMount() { let that = this; axios.get('http://…').then(function(response) { that.setState( { name: response.name} ); }) .catch(function (error) { // handle error }); }

You may also use the arrow syntax, which is more in line with ES6, to refer to Component classes, as shown below. However, in this scenario, the keyword would not refer to the Promise instance context but rather to the Component context.

componentDidMount() { axios.get('http://…').then(response => { this.setState( { name: response.name } ); }); }