Forem: Nathanael

Make Your Website's User Experience Better with React Suspense

Nathanael — Sun, 02 Apr 2023 19:37:46 +0000

You've probably been in a situation where you visited a website and that site took a bit of time to load, you most likely had to sit down waiting as the loading animation repeated itself. Slow loading speeds are often due to the large amount of code or data the site is loading at once. Having to wait for the site to load could be extremely annoying, not to mention a waste of time.

Trying to navigate through the website as the website continued to load was probably not the best experience, and you probably had to wait until the browser had loaded all the code necessary for the site to function.

If you're a React developer, you can massively speed up site load time by indicating an order of render for components using lazy() and <Suspense>.

React lazy()

lazy() is a function that relies on dynamic import and reduces your website or web app load time by code splitting.

Lazy-loading a component tells the browser that the component isn't a priority, the browser will load all other components and load a lazy-loaded component only when a user navigates to that component or route.

Lazy loading offers several advantages, some of which are:

Cut down resources needed to load a site
Reduce the time it takes a user to interact with a site
Improve a website's user experience

Is Lazy loading necessary?

We'll answer this using an example. The code snippet below is from a React app with a Navbar component and two other components named PageOne and PageTwo

import PageOne from "./components/PageOne";
import PageTwo from "./components/PageTwo";
import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<PageOne />} />
        <Route
          path="pagetwo" element={<PageTwo />}
        />
      </Routes>
    </>
  );
}

export default App;

The PageOne and PageTwo components contain two images each.

On initial load, we land on our index or home page shown in the image below

I have not navigated to the Second Page/PageTwo component.

However, the browser has already loaded all the components in the background. To confirm this, I'll navigate to the Sources tab in the Dev tools of chrome browser(If you use Firefox this tab is called 'debugging')

There's an arrow pointing to the components folder in the file tree of the React App on the left side of the image. You can see the browser has already loaded the PageTwo component even though I haven't navigated there yet. This could be an unnecessary drain of user resources, you might wonder, how?

Let's assume you're a content creator that has certain content available for paid users only, loading that content in the background for free users even though they can't access it would not make much sense.

Lazy-loading that premium content will fix this and prevent the browser from loading that content unless a user can access it.

Getting Started with lazy()

Lazy-loading a component takes a different approach from the traditional import() method. I've modified the App component to demonstrate lazy loading

import { lazy, Suspense} from "react";
import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import PageOne from "./components/PageOne";
const PageTwo = lazy(() => {import("./components/PageTwo")});

function App() {  
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<PageOne />} />
        <Route
          path="pagetwo"
          element={
            <Suspense fallback="Loading...">
              <PageTwo />
            </Suspense>
          }
        />
      </Routes>
    </>
  );
}

export default App;

Let's go over the modifications made to the App component

To lazy load a component, the first thing you need to do is import lazy and Suspense from React and you can see this below.

import { lazy, Suspense } from 'react'

The next step to take is to import your component in the lazy function block and assign it to a variable. You can see this in the example below. The PageTwo component is now being imported in the lazy function block and declared as a variable.

const PageTwo = lazy(() => {import("./components/PageTwo")});

Note - Lazy imports should be done outside a function component and not inside. This means you have to declare them at the top with any other exports

When you're done importing your lazy component, you need to wrap it in <Suspense>. A lazy-loaded component or route must be wrapped in <Suspense>

<Suspense> displays a fallback whenever a user navigates to a component and the component is being loaded. You'll learn more about <Suspense> and fallback as you read on

The fallback in <Suspense> is used to display any React component or text you want to render while your component loads. A fallback is important as it gives visual feedback that the component is loading.

<Route
          path="pagetwo"
          element={
            <Suspense fallback="Loading...">
              <PageTwo />
            </Suspense>
          }
        />

If you're wrapping a route component in Suspense, it has to be within the curly braces of the Route element.

The route has now been lazy-loaded and after reloading the React App the change is evident in the Dev tools

Check it out, the PageTwo component was not loaded by the browser on initial render. The component will only be loaded when I navigate there. I've included an animated image below to show this in effect.

The browser only loaded PageTwo when I navigated there and not on the initial render as it did before. This is a huge performance boost as the code and files loaded on the initial render are now smaller than before. Now that you've seen how good lazy-loading is, it's time to see what <Suspense> does.

React Suspense

The initial explanation of <Suspense> was brief and in this section, you'll learn more about <Suspense>. You'll learn:

How to use one <Suspense> for multiple components.
How to use multiple <Suspense> for different components
How to add an ErrorBoundary to <Suspense>

The PageTwo component used in the section discussing lazy loading contains a <Suspense> with a fallback with the text "Loading..." The image below shows what the suspense displayed while the component was loaded in the background

A <Suspense> fallback would normally be a loader component with a spinner or a skeleton loader, but we'll keep things simple in this project.

Something worth mentioning is that you can use <Suspense> on components that aren't lazy loaded.

Wrap multiple elements in one suspense

You can wrap several components in a single <Suspense>. Multiple components wrapped in a <Suspense> will be loaded at the same time with a single fallback.

The code below has three components wrapped in a single <Suspense>.

import LightComponent from "./components/LightComponent";
import { lazy, Suspense } from "react";
const MediumComponent = lazy(() =>(import("./components/MediumComponent")
));
const HeavyComponent = lazy(() => (import("./components/HeavyComponent")
));
function App() {
  return (
    <section>
      <Suspense fallback="Loading">
        <LightComponent />
        <MediumComponent />
        <HeavyComponent />
      </Suspense>
    </section>
  );
}

export default App;

There are three components of varying render times in the code snippet above, they are:

LightComponent - Contains a simple text.
MediumComponent - Contains an image.
HeavyComponent - Contains an image.

All the components are in the same <Suspense> with a fallback. MediumComponent and HeavyComponent are lazy-loaded, You may have noticed that LightComponent isn't lazy-loaded but still works with <Suspense>. As I mentioned, you don't need to lazy load a component for it to work with <Suspense>

Placing all three components in the same <Suspense> means all three components will be completely loaded before rendering. The result is the image below

One or all of the three components is not ready to render to the screen, this causes the fallback to be displayed until all components are ready. After fully loading all the components, it renders them all at once

You can see from the above example that wrapping all your elements in one <Suspense> will load all your components at once, even if some of the components are already loaded and ready to render. The page will only display the components when everything is loaded and ready to render.

Nesting suspense

You've seen that wrapping several elements in the same <Suspense> might not always be the best option. You can wrap your components in different <Suspense> if you have components with varying sizes.

Check the code snippet below.

import LightComponent from "./components/LightComponent";
import { lazy, Suspense } from "react";
const MediumComponent = lazy(() =>(import("./components/MediumComponent")
));
const HeavyComponent = lazy(() => (import("./components/HeavyComponent")
));
function App() {
  return (
    <section>
      <Suspense>
        <Suspense fallback="Loading Light Component">
          <LightComponent />
        </Suspense>
        <Suspense fallback="Loading Medium Component">
          <MediumComponent />
        </Suspense>
        <Suspense fallback="Loading Heavy Component">
          <HeavyComponent />
        </Suspense>
      </Suspense>
    </section>
  );
}

export default App;

Notice how each component has its own <Suspense>. Wrapping each component with its <Suspense> means it will now be rendered in order of readiness. The order of render for our App would now be:

The entire App Component would start loading with a fallback of Loading...
LightComponent will get rendered to the screen immediately after it finishes loading.

The fallbacks for MediumComponent and HeavyComponent will be displayed as those components continue fetching data.
MediumComponent will be rendered once fully loaded while the fallback for HeavyComponent remains as HeavyComponent keeps fetching data.

HeavyComponent gets rendered immediately after it fully loads.

You've seen how <Suspense> can greatly improve the quality of your websites or web apps. However, just because you can wrap multiple components in <Suspense> does not mean you should. You should wrap only heavy or lazy-loaded components in <Suspense>, Wrapping components with only texts or light images in suspense would not make much sense.

Some things you can wrap in <Suspense> are:

A component that makes a call to an API
A component with a lot of images
Routes

“Simplicity boils down to two steps: Identify the essential. Eliminate the rest.”

― Leo Babauta

Improve Suspense with an Error Boundary

You can level up your code even further by adding an error boundary to <Suspense>. An error boundary catches errors in your code that could otherwise break your app.

If a component wrapped in <Suspense> without an error boundary throws an error, your app will only display a blank page which wouldn't be very helpful. <Suspense> with an <ErrorBoundary>, however, will display a fallback instead of a blank page

Add an error boundary

To add <ErrorBoundary> to <Suspense>, you need to install react-error-boundary as a dependency using either npm or yarn install.

Follow these steps to add <ErrorBoundary> to <Suspense>.

Navigate to your terminal and type npm install react-error-boundary if you use the node package manager or yarn add react-error-boundary if you use yarn.

Import <ErrorBoundary> into your app at the top

import { ErrorBoundary } from "react-error-boundary"

Wrap your suspense in <ErrorBoundary> and provide a fallback for <ErrorBoundary>. Using a code snippet from one of our earlier examples to demonstrate this, we have
```
        <ErrorBoundary fallback={<p>Something went wrong</p>}>
            <Suspense fallback="Loading Heavy Component">
              <HeavyComponent />
            </Suspense>
        </ErrorBoundary>
```
The fallback makes sure you or your users can see an error message instead of a blank page, doing this greatly improves the user experience of your website.

You can go one step further to improve ErrorBoundary by adding an ErrorFallback component instead of a simple text, with an ErrorFallback component you can display a proper error message, together with a button to refresh the page or reset your app state. You can create an ErrorFallback by following these steps.

Create a new React component called ErrorFallback and in that component add the following code

const ErrorFallback = ({ error, resetErrorBoundary }) => {
  return (
    <div>
        <p>Something went wrong</p>
        <pre>{error.message}</pre>
        <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

export default ErrorFallback

Error Fallback takes in two props:

error is the error thrown by the component wrapped in the error boundary.

resetErrorBoundary is a function that resets your state or App to its original state before an error was thrown

Import the ErrorFallback component in your App component or wherever you used the error boundary
```
import ErrorFallback from "./components/ErrorFallback";
```

Replace the fallback prop in the error boundary with a new prop called FallbackComponent

<ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => /*add your code to reset state here*/}> 
    <Suspense fallback="Loading Heavy Component"> 
        <HeavyComponent /> 
    </Suspense> 
</ErrorBoundary>

Add the ErrorFallback component to the FallbackComponent

Add a function called onReset to ErrorBoundary the onReset function takes in a code used to reset the state of the parent component to its original state before an error was thrown. It's up to you to provide the code

Conclusion

In this article you have seen how to:

Lazy-load components.
Add <Suspense> to or Suspend your components.
Add fallback to <Suspense>.
Add ErrorBoundary to <Suspense> to catch any errors.

You've also seen that you need to add <Suspense> to lazy components, but you don't need to lazy load a component before using <Suspense>

Add lazy() and <Suspense> to appropriate sections of your code and you'll improve your website's user experience a lot. If you're interested in learning further, you can check the official react docs.

If you have any comments or questions please feel free to ask them or reach out to me on Twitter where I'm most active

Make A Toggle Password Visibility Feature with ReactJS

Nathanael — Fri, 17 Mar 2023 15:00:00 +0000

This article will talk about the importance of toggle password visibility feature and how to make it using ReactJS

Form fields are an important part of our daily activities, we fill them to register as a user on websites, login, send feedback etc. As developers, it is very important to make forms as accessible as possible to everyone. One way to do this is to add a toggle password visibility option to forms.

A Website or Application that wants its users to have a good experience will have an option to toggle password visibility either using the open-eye/closed-eye icon (like the image below) or using the "show/hide" text.

Adding a password visibilty toggle feature to password form fields has several advantages, some of which are:

Allows you to see and correct any typographical errors while typing your password
Gives you the ability to copy/paste password
Improves web accessibility for users with some form of disability

There are several other reasons why this feature is a must have and I'll link a well-researched article in the conclusion, for now keep reading to see how to make the toggle feature using ReactJS in just three steps (You can skip to the third step if you already have a form and all you need is functionality).

Note - I assume you have some basic knowledge of ReactJS including hooks, especially the useState Hook that we'll use. If you're new and have no idea what I'm talking about, feel free to read the docs

Create a Login Form

I’ll be using an empty App component for this tutorial, however, feel free to fit this tutorial to your needs.

Create a form inside the parent div.

return (
    <div className="App">
      <form>
      </form>
    </div>
  );

Create an input with a type of ‘email’ inside the form. You can add a heading to the form if you want

<form>
        <h1>Login</h1>
        <input
          type="email"
          className=""
          placeholder="Email"
          autoComplete="email"
          required
        />
 </form>

Create a div below input. Give the div a classname of “password-div” and nest two things inside the div- An input with type of ‘password’ and a p tag

         <div className="password-div">
           <input
             type="password"
             className=""
             placeholder="Password"
             autoComplete="password"
             required
           />
           <p>Show</p>
           </div>

You can add a button to the form

return (

    <div className="App">
      <form>
        <input
          type="email"
          className=""
          placeholder="Email"
          autoComplete="email"
          required
        />
        <div className="password-div">
          <input
            type="password"
            className=""
            placeholder="Password"
            autoComplete="password"
            required
          />
          <p></p>
        </div>
      <button>Login</button>
      </form>
    </div>
  );
}
export default App;

Style the Login form

You can style the form yourself or use the CSS snippet below

.App{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
form {
  background-color: grey;
  padding: 1rem;
  height: 25rem;
  width: 25rem;
}
input{
  width: 100%;
  height: 3rem;
  font-size: 1rem;
  margin: 5px 0;
  text-indent: .5rem;
}
button{
  width: 100%;
  height: 3rem;
  font-size: 1rem;
  background-color: white;
  border: none;
  margin-top: 3rem;
  cursor: pointer;
}
.password-div{
  position: relative;
}
p{
  position: absolute;
  top:20%;
  right: 0;
  font-size: .8rem;
  cursor: pointer;
  color: blue;
}

Adding the CSS snippet will give you the image below

Add functionality to the password toggle

You can make the toggle functional by following these steps:

Import useState into your component

import { useState } from "react";

Initialize a state called visible and set its default value to false

const [visible, setVisible] = useState(false);

Create a function called togglePassword and inside the function block- setVisible to the opposite state of visible i.e. if useState(false) set it to true and vice versa

const togglePassword = () => {
    setVisible(!visible);
  };

Make a small modification to the type prop in the password input. Replace type='password' with type={visible ? 'text' : 'password'}.

This line of code will change the type of input depending on the state of visible

Finally, add the togglePassword function to the onClick property of p and conditionally render the text content based on useState

<p onClick={togglePassword}>{visible ? 'Hide' : 'Show'}</p>

You have now added functionality to the password visibility toggle and your form field is more accessible to several people across the globe.

You can see the results of this article in the animated image below.

Conclusion
You’ve seen how important the password visibility toggle feature is in web development as well as the benefits of having it in your project.

This article has also shown how to make it yourself. If you're interested in reading more about making your form fields accessible, Nicolas Steenhout talks about it in his article

If you have any questions or suggestions feel free to drop them in the comments or reach out to me on twitter

Code debugging for beginners

Nathanael — Fri, 03 Mar 2023 00:00:00 +0000

What is debugging

If you're a software developer, you've probably experienced situations where your code didn't work as you expected it to, your next step was probably to go through your code looking for the error(s) or to ask someone to help you look for any error(s). The moment you found the error/mistake, you fixed it and let out a sigh of relief as your code now worked correctly.

That process of checking your code, finding the error and fixing it is called debugging.

Debugging is one of the most important skills for programmers because it helps them find problems and fix them before a user interacts with their program.

History of the term "debugging"

The term "debugging" as used in computer programming has an interesting origin. The popular belief is that it started in the 1940s when a moth got into a computer belonging to Harvard University and crashed it. Admiral Grace Hopper called the process of removing and fixing the computers "debugging". The term took off from there and became widely accepted by the computer science community soon after.

Do you need to know how to debug?

You do! As developers, we interact with a computer using programming languages. We use these to edit information, receive information, send it somewhere else etc. The computer carries out our activities using electronic pulses that convert our information to binary figures of 0s and 1s.

Our constant actions of editing, sending and receiving information means sometimes we can make mistakes and our computers just keep working based on our mistakes.

The fact that we're prone to making mistakes means we should learn how to resolve these mistakes as efficiently as possible whenever we encounter them.

“If debugging is the process of removing software bugs, then programming must be the process of putting them in.”

― Edsger W. Dijkstra

Common debugging practices

We already saw earlier that debugging is the process of looking through malfunctioning code and fixing errors.

There are several tools that can help you debug your code, but it is important to learn some basic practices that could help you especially if you're working on a small project or have no experience with debugging tools. Some common debugging practices are:

Checking your code for spelling errors or unintentional omissions
Reading documentation
Checking your console or IDE for error messages
Googling error messages
Asking for help

Let's talk about these practices briefly and see what they involve.

Look through your code

The first step in debugging is to look for inconsistencies in your code. Check for mistakes in your spelling or logic.

Here's an example, a few days ago I was writing some React code and faced a bug, I copied code from another file and pasted it in the function block shown below. This made my code look like this

useEffect(() => {
    //My Code
,[]}
)

Instead of this

useEffect(() => {
    //My Code
},[])

This simple mistake gave me a couple of minutes of frustration but I debugged it by looking through my code for inconsistencies.

A bug does not have to be complicated blocks of code, it can be as simple as omitting a letter while writing code, for example, the code consol.log('Nathanael says Hi') is meant to log a message on your console but there's a spelling error in the code, this prevents our code from working properly, looking through our code for spelling errors can help us catch this and we simply fix that error by correctly typing console.log('Nathanael says Hi') .

Reading Documentation

One of the most popular jokes in the tech world is "Several hours of debugging can save you from a few minutes of reading documentation". Please take this statement just as it is, a joke. Save yourself from unnecessary pain by thoroughly reading the documentation of whatever you're making use of, even if you're used to working with something similar.

Reading documentation can feel stressful sometimes because it contains a lot of info, this is understandable, but remember that official documentation contains a lot of info because it is written to be as detailed as possible to help people understand a tool or programming language better and faster.

Don't save yourself a few minutes of reading documentation, save yourself hours of unnecessary debugging.

Check your IDE/Console for errors

Every standard IDE has a way of pointing out errors in code to you either visually or using error codes.

For example there's a mistake in the code below:

{cuisine.map((item) => {
        return (
          <Card key={object.id}>
            <Link to={"/recipe/" + item.id}>
              <img src={item.image} alt={item.title} />
              <h4>{item.title}</h4>
            </Link>
          </Card>

We've defined the wrong name in our key prop, it should be item.id not object.id since we've named our argument 'item'. My IDE instantly catches this and alerts me to it in the image below

My IDE tells me exactly what the problem is and the exact line of code it appears. It says 'object is not defined' and it says the code is on line 22, this allows me see the error and locate it in my code. A lot of IDEs have this capability and this makes them a helpful tool for debugging your code.

Googling Error messages

Sometimes, you will run into errors that seem beyond your scope, especially if your IDE gives a vague error message such as a status code.

Let's see an example of this, let's say you're working with an API and suddenly it stops working, refusing to give data! Let's assume you check your console and see a status code of 402, simply pasting that error code into a google search bar gives an answer to the problem.

Simply pasting that error code in our search bar has told us that we need to pay to use that API we're trying to work with.

You can paste almost any error message into Google's search bar and you will likely get your answers in no time.

Sometimes asking google isn't enough and your questions are left unanswered, what do you do in such a situation? That's where the next point comes in.

Ask for help

If you run into an error you can't fix on your own and you have a friend who's familiar with the tool or programming language you're using, asking that friend for help could do you a lot of good, sometimes the best debugger is a friend ready to help.

What if you don't have developer friends?

There are several developer communities that are always ready to help, there's a very good chance a lot of developers in the communities have faced what you're facing and have the solutions you need. Some developer communities are:

You can also find developer communities on social media such as:

These lists are by no means exhaustive, they are just a few of many helpful communities out there to get help. All you have to do is join one and politely ask for help. Joining a community is beneficial because you can get more detailed answers and explanations to your errors plus the added bonus of meeting cool people to learn from!

Use console.log() or some logging syntax to catch errors

A bonus tip for debugging is to log certain pieces of your code into the console or IDE. For example If you get data or code from somewhere else for example if you call an API and you're not sure what it contains, you can save yourself some headache by console logging the data and seeing what it contains.

Conclusion

Debugging is one of many skills that programmers need. It can be challenging, but with practice it becomes second nature.

We've seen a few steps you can take to debug better and also places to get help if you get stuck. Hopefully you learned something that'll help you become a better debugger.

If you want a more in-depth article as well as some solid programming principles, check out FreeCodeCamp's article.

If you have questions or comments be sure to drop them below or text me on twitter where I'm usually active.