DEV Community: Derek Oware

Debouncing React controlled components

Derek Oware — Mon, 27 Sep 2021 14:11:46 +0000

Motivation
What is debouncing?
Controlled and Uncontrolled components
- Controlled
- Uncontrolled
Debouncing Controlled components
useDebounce hook
Real-life use cases

Motivation

In my most recent application, I came across the need to debounce some form fields. Every time I had to debounce, it's usually an uncontrolled component. This time, I had to debounce a controlled component. A normal debounce function wouldn't work as expected, so I had to use another method and ended up creating a useDebounce hook for reusability.

What is debouncing?

If you don't know what it is, debounce is usually a set of code that keeps a function from running too many times. You can read more about it in this article.
It is usually used for user actions to prevent the user from spamming too many requests to the server. A usual use case is in search or toggle inputs. We listen to the user inputs and only send the result to the server when no more inputs coming in.
Let's see some example



/**
 * A basic debounce function.
 * Most implementations you'll see look like this.
 * @params {VoidFunction} callback - A callback function to be called after timeout ends
 * @params {number} timeout - Timeout in milliseconds
 * @returns {VoidFunction} - A function to execute the callback
 */

function debounce(callback, timeout = 500) {
  let timer

  // inner function
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => callback.apply(this, args), timeout)
  }
}

The debounce function sets a timer(500ms in our example), when the inner function is called before the timer ends, we cancel the timer and start over. The callback function is only triggered when the timer ends without being interrupted.

See a detailed implementation on codesandbox

using in our component;



<input
  name="search"
  type="search"
  id="search-input"
  onChange={debounce(handleChange)}
/>

See a detailed implementation on codesandbox

This is an example with an uncontrolled component

Controlled and Uncontrolled components

Controlled

In a React controlled component, the input value is set by the state. The onChange handler listens to input changes and stores the value into the state. The input value is then updated with the value stored in the state.



function Controlled() {
  const [value, setValue] = useState()

  const handleChange = event => {
    setValue(event.target.value)
  }

  const handleSubmit = event => {
    event.preventDefault()
    console.log({ value })
  }

  return (
    <form id="search" onSubmit={handleSubmit}>
      <label htmlFor="search-input">Search</label>
      <input
        id="search-input"
        name="search"
        type="search"
        value={value}
        onChange={handleChange}
      />
      <button type="submit">Search</button>
    </form>
  )
}

Edit on codesandbox

Uncontrolled

In an uncontrolled component, instead of updating the values with the state, you can use a ref to get form values from the DOM. Basically, in an uncontrolled component, we allow the form elements to update their values with the normal HTML form behaviour
For example



function UnControlled() {
  const inputRef = useRef(null)

  const handleSubmit = event => {
    event.preventDefault()
    console.log({ value: inputRef.current.value })
  }

  return (
    <form id="search" onSubmit={handleSubmit}>
      <label htmlFor="search-input">Search</label>
      <input ref={inputRef} id="search-input" name="search" type="search" />
      <button type="submit">Search</button>
    </form>
  )
}

The input field is updated by the DOM. We select the input element with our inputRef and then read the value when we need it.

Edit on codesandbox

Debouncing Controlled components

We've already seen how to debounce an uncontrolled component in our first example. You can also see and interact with the example on codesandbox.

The approach used in the example doesn't work for controlled components.
Instead of writing a debounce function to debounce our input,



function Controlled() {
  const timerRef = useRef(null) // Store the previous timeout
  const [value, setValue] = useState()
  const [user, setUser] = useState()

  const fetchUserDetails = useCallback(async () => {
    try {
      const [userDetails] = await fetch(`${API}?name=${value}`).then(res =>
        res.json()
      )

      setUserDetails(prevDetails => ({ ...prevDetails, ...userDetails }))
    } catch (error) {
      console.log(error)
    }
  }, [value])

  // Producing the same behaviour as the 'inner function' from the debounce function
  useEffect(() => {
    clearTimeout(timerRef.current) // clear previous timeout

    timerRef.current = setTimeout(() => {
      timerRef.current = null // Reset timerRef when timer finally ends
      fetchUserDetails()
    }, 500)

    return () => clearTimeout(timerRef.current)
  }, [fetchUserDetails])

  const handleChange = event => {
    setValue(event.target.value)
    console.log(event.target.value)
  }

  return (
    <form id="search">
      <label id="search-label" htmlFor="search-input">
        Search for user details
      </label>
      <input
        name="search"
        type="search"
        id="search-input"
        value={value}
        onChange={handleChange}
      />
    </form>
  )
}

Instead of storing the previous timer in a lexical scope, we store it in a ref and then send our request to the server with the useEffect hook.
It's a simple implementation but we have one problem. It's not reusable. We need to create a custom hook for this.

`useDebounce` hook



import { useEffect, useRef } from "react"

/**
 * @callback callbackFunc
 * @param {any[]} args - arguments passed into callback
 */
/**
 * Debounce function to reduce number executions
 * @param {callbackFunc} cb - callback function to be executed
 * @param {number} wait - number of milliseconds to delay function execution
 * @param {any[]} deps - dependencies array
 */
const useDebounce = (cb, wait = 500, deps = []) => {
  const timerRef = useRef(null)

  useEffect(() => {
    clearTimeout(timerRef.current)

    timerRef.current = setTimeout(() => {
      cb.apply(this, args)
    }, wait)

    return () => clearTimeout(timerRef.current)
    /** used JSON.stringify(deps) instead of just deps
      * because passing an array as a dependency causes useEffect 
re-render infinitely
      * @see {@link https://github.com/facebook/react/issues/14324}
      */
    /* eslint-disable react-hooks/exhaustive-deps */
  }, [cb, wait, JSON.stringify(deps)])
}

My implementation isn't perfect and may contain bugs but it works fine for my case. Feel free to improve it and share yours in the comments.

Now we can useDebounce in our component;



function Controlled() {
  const [value, setValue] = useState()
  const [user, setUser] = useState()

  // Debounce our search
  useDebounce(async () => {
    try {
      const [userDetails] = await fetch(`${API}?name=${value}`)
                                                             .then(res => res.json())

      setUserDetails(prevDetails => ({ ...prevDetails, ...userDetails }))
    } catch (error) {
      console.log(error)
    }
  }, 500, [value])

  const handleChange = event => {
    setValue(event.target.value)
    console.log(event.target.value)
  }

  return (
    <form id="search">
      <label id="search-label" htmlFor="search-input">
        Search for user details
      </label>
      <input
        name="search"
        type="search"
        id="search-input"
        value={value}
        onChange={handleChange}
      />
    </form>
  )
}

See detailed implementation on codesandbox

Real-life use cases

I'm currently working on an app.
In my app, for each item in the cart, the user can add different sizes and also increment or decrement the quantities of each size.
The sizes and quantities are parsed into an object and stored in context before being sent to the server.

While exploring this topic, I created a demo application for validating a sign-up form with an API in real-time.

After writing this article, I found a different approach on usehooks.com to this and I recommend checking it out

Designing forms for mobile

Derek Oware — Mon, 29 Mar 2021 19:09:37 +0000

Designing forms for mobile can be a hiccup especially when it has many fields. I don’t know how many people know this; the on-screen keypad can cover your form or the submit button making it difficult for users to click thus disrupting the sign-in/sign-up flow.

What I’m Working On

I’m rebuilding an old project, a forms app. The app has so many issues; performance, bugs, inappropriate loaders and Bad forms especially on mobile. I just built something that worked but I should’ve put more work into the form’s layout on mobile. The app was responsive, yes but I didn’t know the effect of the on-screen keypad on forms. It was until I deployed and checked it on my phone before realising the bad.

Better form layout for mobile

A good lesson I learnt from web.dev (which I recommend you check out yourself), use multi-step form. You don’t have to crump everything on a single page.

The screenshots above shows before and after splitting up the form. In the second part, we ensure that the on-screen keypad doesn’t cover any part of our form.
Sure, this works but there is a caveat. Due to the differences in pixel densities among devices, this may not work for all devices as expected, specifically devices with low-density screens like the iPhone 5. This phone again 🤦‍♂‍.

A little detail

“God is in the detail”. Since we are talking about on-screen keypads on mobile phones, there’s no need for desktop users to be affected by this. Desktop users shouldn’t go through steps to complete the registration when they can just do it once even if they’re viewing the page in window mode.

This is important because we want the sign-up flow to be smooth and swift, therefore if there aren’t many fields and they can all fit into the viewport then why bother users with multiple steps.

For desktop devices, all fields go on the same page because they can

When in window mode or when resized into a really small size.

With the user-agent string, you can determine users' platform then give the multi-step form to only the mobile and tablet users. I talk about how to achieve this in my previous article.

Conclusion

A badly designed form can affect the conversion rate for your site or app; therefore, you should do your best to make the flow smooth and simple. When designing for mobile, responsive layout isn’t all. Interactions matter, therefore be sure to test your app on an actual mobile device.

Device Detection with the User-Agent

Derek Oware — Mon, 15 Feb 2021 19:38:17 +0000

Have you ever wanted to implement a feature for a specific platform or device? Like show a screen or some content to mobile users only or execute a different an action based on the user's device

I usually come across contents on sites that are clearly meant for mobile users only while I browse on desktop.

The User-Agent can be helpful in this scenario.

MDN defines the user agent as

The User-Agent request header is a characteristic string that lets servers and network peers identify the application, operating system, vendor, and/or version of the requesting user agent.

A common format for a user agent string looks like:

Mozilla/5.0 (<system-information>) <platform> (<platform-details>) <extensions>

Detect User's device

To know if a user is on mobile you need to look for "Mobi" in the user agent string as you can see in the example below



const BUTTON = document.querySelector("button");

const { userAgent } = window.navigator;

// Set device to "mobile" if "Mobi" exists in userAgent else set device to "desktop"
const device = userAgent.includes("Mobi") ? "mobile 📱" : "desktop 💻";

BUTTON.addEventListener("click", () => alert(`You are on ${device}`));

The example above result in

Desktop Demo

Mobile Demo

Test in your browser

To test this in your browser, open the developer tools and click on the 'toggle device' icon. Refresh your page for changes to apply

Practical Example

Here is a practical example of this in my React application.

I used this in a federated login



// Context API for device

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

export type TDevice = "mobile" | "desktop";

export const DeviceContext = createContext<TDevice>("mobile");

const DeviceContextProvider: React.FC = ({ children }) => {

  const [device, setDevice] = useState<TDevice>("mobile");

useEffect(() => {

    const { userAgent } = navigator;

    // Set device state

    userAgent.includes("Mobi") ? setDevice("mobile") : setDevice("desktop");

  }, []);

return (

    <DeviceContext.Provider value={device}>{children}</DeviceContext.Provider>

  );

};

export default DeviceContextProvider;



// login with provider hook

const useLoginWithProvider = (redirect: (path: string) => void) => {

  const device = useContext(DeviceContext);

  const [signInAttempt, setSignInAttempt] = useState(false);

const login = async (provider: string) => {

    if (device === "mobile") { // Check if user is mobile

      firebase.auth().signInWithRedirect(providers[provider]);

      setSignInAttempt(true);

    } else {

      firebase

        .auth()

        .signInWithPopup(providers[provider])

        .then(handleResult)

        .catch(error => setError(error.message));

    }

  };

useEffect(() => {

    if (signInAttempt) {

      firebase

        .auth()

        .getRedirectResult()

        .then(handleResult)

        .catch(error => setError(error.message));

    }

  }, []);

return login;

};

export default useLoginWithProvider;

Conclusion

Obviously, you can tell this is not meant to replace media queries, however, this can be very useful in your projects. Media Queries are mainly used for responsive pages whereas this method is for device-specific features or content. This is mainly useful when you want your mobile app to behave differently from the desktop version.
You can use this to give mobile users app-like experience especially when dealing with Progressive Web Apps

Improve your developer experience with VSCode snippets

Derek Oware — Fri, 18 Dec 2020 09:36:18 +0000

Code snippets are templates that make it easier to enter repeating code patterns. VSCode's snippets are just one big part of my coding experience. They make it super easy to get away with some boilerplate code. There are code snippet extensions for every language.
You can find VSCode snippets for your language

Table of Content

Why create custom code snippets
How to create custom code snippets
Snippet Syntax
- Tabstops
- Placeholders
- Variables

Why I created custom code snippets

Using React for a long while, I've been using an extension for my snippets. It was great until I started using NextJS. NextJS doesn't require import React from "react" at the top of every react file so it was felt a bit annoying to remove that line every time I used the snippet to start a file.

React 17 was released and we didn't need import React from "react" anymore so the extension became a bit obsolete to me 😑.

I needed more snippets too. I needed snippets for typescriptreact and custom hooks 😏.

How to create custom snippets

It's easier than I thought. Almost too easy 🤗. I recommend checking out the full guide in the VSCode docs.

To create or edit your own snippets,

Go to File > Preferences > User Snippets ( Code > Preferences > User Snippets on macOS)
Select the language for which the snippet should appear (in my case it's typescriptreact) or the New Global Snippets file option if they should appear for all languages.

Snippets files are written in JSON, support C-style comments and can define an unlimited number of snippets.

Below is an example of a for loop snippet for JavaScript:

// in file 'Code/User/snippets/javascript.json'
{
  "For Loop": {
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
    "description": "A for loop."
  }
}

In the example above:

"For Loop" is the snippet name. It is displayed via IntelliSense if no description is provided.
prefix defines one or more trigger words that display the snippet in IntelliSense. Substring matching is performed on prefixes, so in this case, "fc" could match "for-const".
body is one or more lines of content, which will be joined as multiple lines upon insertion. Newlines and embedded tabs will be formatted according to the context in which the snippet is inserted.
description is an optional description of the snippet displayed by IntelliSense.

Snippet Syntax

The body of a snippet can use special constructs to control cursors and the text being inserted. The following are supported features and their syntaxes:

Tabstops

With tabstops, you can make the editor cursor move inside a snippet. Use $1, $2 to specify cursor locations. The number is the order in which tabstops will be visited, whereas $0 denotes the final cursor position.

From the example above we can produce the result in this gif

As you can see in the gif, the cursor starts from array, then onto element, and then finally inside the curly brackets

Placeholders

Placeholders are tapstops with values, like ${1:array} from the above example. The number in ${1:array} is the tapstop and the string after the colon is the default value.

Variables

Variables are written as $variable_name or ${variable_name:default}. When a variable isn't set, its default or the empty string is inserted.

Variables played a significant role in my snippets. I'd like you read more on variables yourself.

I only used one variable (TM_FILENAME_BASE) in my snippets, however, I find the rest to be useful, just not in my use case.

This is an example from my custom snippets

{
  "Base Component Template": {
    "prefix": "rtc",
    "body": [
      "const ${1:$TM_FILENAME_BASE} = () => {",
      "return <>",
      "\t$0",
      "</>",
      "}",
      "\nexport default ${1:$TM_FILENAME_BASE}"
    ],
    "description": "Base React component with no props, imports or types"
  }
}

From the body, ${1:$TM_FILENAME_BASE} is the placeholder, the 1 is the tapstop and it indicates the start and the $TM_FILENAME_BASE is the variable for the filename.

Another example with typescript interface

{
  "Component With Props": {
    "prefix": "rtcp",
    "body": [
      "interface I${1:$TM_FILENAME_BASE}Props {",
      "\t$2",
      "}",
      "\nconst ${1:$TM_FILENAME_BASE}:React.FC<I${1:$TM_FILENAME_BASE}Props> = ({$3}) => {",
      "return <>",
      "\t$0",
      "</>",
      "}",
      "\nexport default ${1:$TM_FILENAME_BASE}"
    ],
    "description": "React component with props and interface definition templates"
  }
}

And with this, I have

See more examples in my git repo

Conclusion

I'll like to clarify that, the snippet you're looking for probably exists in an extension but it's a great experience to create your own custom snippet 😊

I've shared my snippet file on Github so be free to check out and customise it if you want or see the vscode guide to create yours from scratch

Error handling in Fetch vs Axios

Derek Oware — Mon, 12 Oct 2020 15:41:16 +0000

There's so much difference between Fetch and Axios but my focus is on error handling because it caught my attention in my previous project.

Error handling is an essential part of every application we build thus needs to be done correctly.

From the fetch documentation on the difference between Fetch and JQuery, it shows how fetch handles errors differently but I don't think everyone knows about that because tutorials don't talk about that.

The issue

I think there's a good reason to why Fetch handles request failures the way it does but most devs including me usually forget to handle the result.
From the docs :

"The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing."

But this may be a problem is some case because in forms for instance, when the wrong data is sent to the server, we expect the attempt to fail. We may have a validation function and inside that function, if there's a success response we'd redirect the user or store the data.

The solution

In Axios, if there's request failure, it throws an error and you can easily handle the error with a try-catch block and get the error data from error.response.data.

In Fetch, if we have;

const res = await fetch(api);
const data = await res.json();

then, we can handle the result with;

if (!res.ok) {
  error = data;
  return null;
}

return data; // Do something with data if successful

Conclusion

You can check an example code on my gist or on codepen illustrating the error handling in both Fetch and Axios

Cover Photo by Markus Spiske on Unsplash

Upload user avatar with a custom upload button

Derek Oware — Wed, 07 Oct 2020 15:19:09 +0000

I recently wrote on how to customize the default upload button but I want to explore more into this topic and try other options.

I designed an interface to upload a user avatar

How to

We'll start with our HTML

<main>
  <input type="file" name="image" id="image" accept="image/*" />
    <div id="preview-wrapper">
      <div id="preview"></div>
      <button
        id="upload-button"
        aria-label="upload image"
        aria-describedby="image"
      >
        🙂
      </button>
    </div>
</main>

Styling

We give some style for our user avatar.

#avatar {
  background-color: antiquewhite;
  height: 200px;
  width: 200px;
  border: 3px solid #0af;
  border-radius: 50%;
  transition: background ease-out 200ms;
}

#preview {
  position: relative;
}

We then hide our input

input[type="file"] {
  display: none;
}

Then our custom upload button

button {
  padding: 18px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background-color: #08f;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
                         0px 6px 10px 0px rgba(0, 0, 0, 0.14), 
                         0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  transition: background-color ease-out 120ms;
  position: absolute;
  right: -5%;
  bottom: 0%;
}

button:hover {
  background-color: #45a;
}

We've reached our design goal 🙌, but we aren't done yet.

Some JavaScript

Our initialization

const UPLOAD_BUTTON = document.getElementById("upload-button");
const FILE_INPUT = document.querySelector("input[type=file]");
const AVATAR = document.getElementById("avatar");

When our custom button is clicked, we have to programmatically click the input element

UPLOAD_BUTTON.addEventListener("click", () => FILE_INPUT.click());

To render our image

FILE_INPUT.addEventListener("change", event => {
  const file = event.target.files[0];

  const reader = new FileReader();
  reader.readAsDataURL(file);

  reader.onloadend = () => {
    AVATAR.setAttribute("aria-label", file.name);
    AVATAR.style.background = `url(${reader.result}) center center/cover`;
  };
});

WE ARE DONE!!! 🥳🥳🥳

Source code available at codepen.io and github

Custom file upload button

Derek Oware — Tue, 06 Oct 2020 00:55:24 +0000

Customizing the input type="file" is a bit annoying because it comes with a button and an unchangeable text.

With the ::file-selector-button pseudo-selector you can edit the default button. It's still annoying because some CSS properties affect both the button and the text and some affect only the button 😒.

Another caveat is browser support. All major browsers except Firefox support the pseudo-selector.

You can read about the ::file-selector-button for more details.

How to customize the default upload button

We have our html input tag:

<input id="upload" type="file" accept="image/*" />

Then in our css:

input::-webkit-file-upload-button {
  background-color: peru;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px 1px #454545;
  cursor: pointer;
}

Note that I used -webkit-file-upload-button instead of file-selector-button. -webkit-file-upload-button is for Webkit/Blink browsers like Chrome and Opera.

It's up to you if you wanna keep the "No file chosen" text. In this case, I don't wanna keep it. I'm not sure if it can be removed completely but adding position: absolute; puts the text behind the button.

Yayyy!!! 🎉🎉🎉 Now we have our completely customized upload button.

Check out the full code on codepen.io. or clone the git repo

A TIP TO IMPROVE ACCESSIBILITY IN YOUR SINGLE PAGE APPLICATION

Derek Oware — Fri, 02 Oct 2020 17:50:17 +0000

Navigating in a multi-page application is done by refreshing the webpage. In this case, the screen-reader announces to the user when the page is done loading. However, In single-page applications, navigation is done via JavaScript which makes the screen-reader unaware of the navigation.

The solution is easy. When the navigation is done, just set the focus on the <h1></h1> element on the loaded page. The screen-reader will read the text content of the <h1></h1> element, hence making the user aware that the page has finished loading.

DEV Community: Derek Oware

Debouncing React controlled components

Motivation

What is debouncing?

Controlled and Uncontrolled components

Controlled

Uncontrolled

Debouncing Controlled components

useDebounce hook

Real-life use cases

Designing forms for mobile

What I’m Working On

Better form layout for mobile

A little detail

Conclusion

Device Detection with the User-Agent

Detect User's device

Test in your browser

Practical Example

Conclusion

Improve your developer experience with VSCode snippets

Table of Content

Why I created custom code snippets

How to create custom snippets

Snippet Syntax

Tabstops

Placeholders

Variables

Conclusion

Error handling in Fetch vs Axios

The issue

The solution

Conclusion

Upload user avatar with a custom upload button

How to

Styling

Some JavaScript

Our initialization

WE ARE DONE!!! 🥳🥳🥳

Custom file upload button

How to customize the default upload button

A TIP TO IMPROVE ACCESSIBILITY IN YOUR SINGLE PAGE APPLICATION

`useDebounce` hook