Use lodash.debounce inside a function component in React

Joel D Souza — Tue, 16 Jun 2020 07:00:52 +0000

This is my second post.

In this post I'll explain how to debounce a function inside a function react component using lodash.debounce. We'll create a search app that'll search only when there's a gap of 500ms.

Let's first create a basic search component.

    const [userQuery, setUserQuery] = useState("")

    const onChange = e => {
          setUserQuery(e.target.value);
    };

    return (
      <div>
         <input
             type="text"
             value={userQuery}
             onChange={onChange}
         />
      </div>
    )

We'll create a function delayedQuery that'll call the api after a gap of 500ms.

Make sure you wrap it around useCallback to update the function only when userQuery updates.

const updateQuery = () => {
    // A search query api call.
    sendQuery(userQuery)
};

const delayedQuery = useCallback(debounce(updateQuery, 500), [userQuery]);

We'll call delayedQuery inside useEffect only when the value of userQuery changes. We should also return delayedQuery.cancel to cancel previous calls during useEffect cleanup.

useEffect(() => {
   delayedQuery();

   // Cancel previous debounce calls during useEffect cleanup.
   return delayedQuery.cancel;
}, [userQuery, delayedQuery]);

So, our debounced search is now implemented. Below is the complete code. There is also a codesandbox link for you to play around.

import debounce from 'lodash.debounce'
...

function searchApp() {
const [userQuery, setUserQuery] = useState("")

const updateQuery = () => {
    // A search query api call.
    sendQuery(userQuery)
};

const delayedQuery = useCallback(debounce(updateQuery, 500), [userQuery]);

const onChange = e => {
   setUserQuery(e.target.value);
};

useEffect(() => {
   delayedQuery();

   // Cancel the debounce on useEffect cleanup.
   return delayedQuery.cancel;
}, [userQuery, delayedQuery]);

return <input onChange={onChange} value={userQuery} />
}

Building an i18n translator using React

Joel D Souza — Tue, 07 Apr 2020 15:04:01 +0000

It's so obvious that websites need to be internationalized. But creating multiple versions of the same website is not the best solution to it. Using React we can completely globalize our application. I'm going to show you how it can be done.

This application includes:

Translate Engine

It does nothing but gets a word and returns the translated word based on the language selected. You need to pass the selected language and a word to this component. The children for the Translate component should only be a string. I have used Redux below, but you can use local state or Context API to set the language.

import React, { PureComponent } from "react"
import { connect } from "react-redux"

// The function which returns you translated words based on a language.
import Dictionary from "./dictionary"

class Translate extends PureComponent {

    translateWord(word) {
        try {
            const { lang } = this.props
            // lang = "es"
            const languageDb = Dictionary(lang)

            if (word in languageDb.words) {
                return languageDb.words[word]
            }

            return word

        } catch (err) {
            console.error('Error while translating::translateWord', err)

            // If something goes wrong return the word as it is.
            return word
        }
    }

    render() {
        let { children, lang } = this.props

        if (typeof children === "string" && lang !== "en") {
           // pass the lowerCased word to get in the translated form.
           return this.translateWord(children.toLowerCase())
        }

        return <>{children}</>
    }
}

const mapStateToProps = (state) => {
    return {
        lang: state.lang,
    }
}

export default connect(mapStateToProps, null)(Translate)

Dictionary

This can be an object/function that returns a list of all the available translated words based on a language. You'll have to feed a JSON object (as shown below) that lists all the translated words.


import es from "./es.json"
import ru from "./ru.json"
import de from "./de.json"

const languages = {
    es,
    ru,
    de,    
}

export default function(lang) {

    return languages[lang]
}

This is how my spanish DB (es.json) looks like:

{
   "lang":"es",
   "words" : {
      "search"        : "registrar",
      "conversation"  : "conversación"
   }
}

You can use the translate component as shown below, But remember its children can only be a string.

 <Translate>Hello</Translate>

I have created a simple sandbox for you to understand better practically. I have also created a hooks version below as suggested in comments.

The hooks version:

This is my first post/blog I have ever written and published. I thought of giving it a try during the pandemic lockdown. Let me know for suggestions on how to improve the content.

Happy coding!
Stay Inside and Stay Safe

DEV Community: Joel D Souza

Use lodash.debounce inside a function component in React

Building an i18n translator using React

This application includes:

Translate Engine

Dictionary