DEV Community: danilo95

React autocomplete search input (Debounce)

danilo95 — Wed, 13 Jan 2021 21:27:01 +0000

Another highly requested feature, this one consists of:
According to what the user types in an input, we must show suggestions that are in our database.

It is usually used in e commerces, since it allows to improve the user experience and have faster purchases.

for our example we will use as backend the API

This allows according to a parameter to find public api to use.
then what we will do is create an input that according to what the user types, we will show him a list of public api that match the search term.

for this component we require these libraries:
yarn add axios (to make api requests)
yarn add styled-components* (to create css with javascript, btw you can implement the code in a normal sass file)
yarn add lodash.debounce (we’ll go into more detail later)

lets start
first let’s create our requests.js file
This will be in charge of making the request to the api

const url = axios.create({
    baseURL: 'https://api.publicapis.org/',
});

export const getApiSuggestions = (word) => {
    let result = url
        .get(`/entries?title=${word}`)
        .then((response) => {
            return response.data;
        })
        .catch((error) => {
            return error;
        });

    return result;
};

now lets create our searchInput component, first we need some style with a little help of styled components

import styled from 'styled-components';

export const Input = styled.input`
    width: 222px;
    height: 51px;
    padding: 10px;
    background: #f3f3f3;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    border: none;
`;

export const Ul = styled.ul`
    display: contents;
`;

export const Li = styled.ul`
    width: 222px;
    font-weight: bold;
    height: 51px;
    padding: 10px;
    background: #f5f0f0;
    display: block;
    border-bottom: 1px solid white;
    &:hover {
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.14);
    }
`;

export const SuggestContainer = styled.div`
    height: 240px;
    width: 242px;
    overflow: scroll;
    &::-webkit-scrollbar {
        display: none;
    }
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
`;

now our component

import React, { useState, useCallback } from 'react';

import { Input, Ul, Li, SuggestContainer } from './style';

export default function SearchInput({
    loading,
    options,
    requests,
    placeholder,
}) {
    const [inputValue, setInputValue] = useState('');

    const updateValue = (newValue) => {
        setInputValue(newValue);
        requests(newValue);
    };

    return (
        <div>
            <Input
                value={inputValue}
                onChange={(input) => updateValue(input.target.value)}
                placeholder={placeholder}
            />
            <SuggestContainer>
                <Ul>
                    {loading && <Li>Loading...</Li>}
                    {options?.entries?.length > 0 &&
                        !loading &&
                        options?.entries?.map((value, index) => (
                            <Li key={`${value.API}-${index}`}>{value.API}</Li>
                        ))}
                </Ul>
            </SuggestContainer>
        </div>
    );
}

now let’s understand the parameters:

loading: this state, passes from the parent, this will allow showing a loading message while we make the corresponding request.
options: this is the array of objects that we want to show as suggestions.
requests: this is the request in which we will perform the search, the parent has the function, but it is this component that executes it.

the functions:
updateValue: we basically work with controlled components, this function is in charge of setting the new input value, and sending that value to our requests

the important part of render code:

first, we validate if loading is true, if this is the case, only the loading value is displayed while the requests are finished
our second validation ensures that loading is false, and that our options array contains some value to display otherwise it is ignored.

.? is an optional chaning allows reading the value of a property located within a chain of connected objects without having to expressly validate that each reference in the chain is valid.
In other words, it will avoid that if the entries property does not exist the array is not there or it will map a null object

lets create our app

import React, { useState, useEffect } from 'react';
import { getApiSuggestions } from './requests';
import SearchInput from './searchInput';
import { MainWrapper } from './style';

function App() {
    const [options, setOptions] = useState([]);
    const [loading, setLoading] = useState(false);

    const getSuggestions = async (word) => {
        if (word) {
            setLoading(true);
            let response = await getApiSuggestions(word);
            setOptions(response);
            setLoading(false);
        } else {
            setOptions([]);
        }
    };

    const getApiUrl = (url) => {
        window.open(url, '_blank');
    };

    return (
        <MainWrapper>
            <SearchInput
                loading={loading}
                options={options}
                requests={getSuggestions}
                onClickFunction={getApiUrl}
                placeholder="find a public api"
            />
        </MainWrapper>
    );
}

export default App;

functions:

getSuggestions: this is the function that we will pass to our component, this first validates that there is a value to search (we will not send empty values, it would be a meaningless request)
If it does not exist, we clean the options object to not show suggestions if the search term is empty.
After this, taking advantage of async await, we wait for the request to finish and return a value and we set it in options, which is the state that we will pass to the component.
getApiUrl: we will pass this function to the component, it basically opens a url in a new tab.

with all of the above our component should work as follows

it’s working, but you saw the problem?.
for each letter we make a request to the api.
this is harmful imagine 10 thousand users using your project and to complete a search each user ends up making 20,000 requests to the api, it is unsustainable and bad practice.

So how do we solve it? debouncing

what is debouncing?
its a function that returns a function that can be called any number of times (possibly in quick successions) but will only invoke the callback after waiting for x ms from the last call.

lets rebuild our searchInput

import React, { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';

import { Input, Ul, Li, SuggestContainer } from './style';

export default function SearchInput({
    loading,
    options,
    requests,
    onClickFunction,
    placeholder,
}) {
    const [inputValue, setInputValue] = useState('');

    const debouncedSave = useCallback(
        debounce((newValue) => requests(newValue), 1000),
        []
    );

    const updateValue = (newValue) => {
        setInputValue(newValue);
        debouncedSave(newValue);
    };

    return (
        <div>
            <Input
                value={inputValue}
                onChange={(input) => updateValue(input.target.value)}
                placeholder={placeholder}
            />
            <SuggestContainer>
                <Ul>
                    {loading && <Li>Loading...</Li>}
                    {options?.entries?.length > 0 &&
                        !loading &&
                        options?.entries?.map((value, index) => (
                            <Li
                                key={`${value.API}-${index}`}
                                onClick={() => onClickFunction(value.Link)}
                            >
                                {value.API}
                            </Li>
                        ))}
                </Ul>
            </SuggestContainer>
        </div>
    );
}

functions:

debouncedSave:
first usecallback, pass an online callback and an array of dependencies. useCallback will return a memorized version of the callback that only changes if one of the dependencies has changed.
then using debounce from lodash.debounce we tell it that this function will be launched after a certain time.
in this way we allow the request to only be executed after a certain time, allowing the user to write their real search and not throw queries like crazy.

let’s see the change in practice how it works

eureka, now with our debouncing our function only performs the request after a certain time, this way we give the user time to enter a valid search term.

We avoid filling our api with garbage requests, and we have improved the user experience.

things to improve:
This api does not have a limit, the correct thing would be to set the response limit to 3–5 since showing a list of 50 suggestions is not the most optimal. 3–5 options as suggestions would be ideal.

Complete Code

Fill select options depending on other select field using Axios, React Hook Form and jsonplaceholder API

danilo95 — Mon, 11 Jan 2021 23:01:34 +0000

A classic problem for developers,
They give us a list of states, from which state the user chooses we will show the cities, and within the cities another element.
today we will do something similar using jsonplaceholder:

what is jsonplaceholder?
It is a free api to use, which will allow us to play with its GETs, in this way this example will be the most real to a real problem in a real problem.

** More information here **
https://jsonplaceholder.typicode.com/

our objective is
that when loading our component it will show a list of authors, when selecting an author a second select will be filled with the information of the posts of that author, when choosing a post we will show the comments of said post on the screen.

let’s do it

we will need these libraries first

yarn add axios (to make requests)
yarn add react-hook-form (for handling forms)
yarn add styled-components (powerful css library)

first lets create our style.js file with styled Components

import styled from 'styled-components';
export const SelectInput = styled.select`
    width: 150px;
    height: 51px;
    font-size: 14px;
    line-height: 16px;
    background: #f3f3f3;
    border-radius: 5px;
    padding: 15px;
    border: none;
    font-weight: bold;
    color: #656363;
`;

export const InputContainer = styled.div`
    width: 100%;
    border-style: dotted;
    padding: 30px 0px 30px 0px;
    display: flex;
    justify-content: center;
`;

export const InputWrapper = styled.div`
    padding: 0px 10px 0px 10px;
`;

export const Email = styled.p`
    font-weight: bold;
`;

export const Comment = styled.p`
    font-style: italic;
`;

now lets create our request file, to manage all the gets from jsonplaceholder

import axios from 'axios';

const url = axios.create({
    baseURL: 'https://jsonplaceholder.typicode.com/',
});

export const getUsers = (body) => {
    let result = url
        .get('/users')
        .then((response) => {
            return response.data;
        })
        .catch((error) => {
            return error;
        });

    return result;
};

export const getUsersPosts = (id) => {
    let result = url
        .get(`/posts?userId=${id}`)
        .then((response) => {
            return response.data;
        })
        .catch((error) => {
            return error;
        });

    return result;
};

export const getUsersComments = (id) => {
    let result = url
        .get(`/comments?postId=${id}`)
        .then((response) => {
            return response.data;
        })
        .catch((error) => {
            return error;
        });

    return result;
};

axios.create: this allow us to create a configuration for every requests,in this case i set the baseurl so, anytime i need to make a get y just call url.get and write the endpoint and queryparams.

at the end axios will return all the data in response.data otherwise return a object call error.

lets create our app component

import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { getUsers, getUsersPosts, getUsersComments } from './Requests';
import {
    SelectInput,
    InputContainer,
    InputWrapper,
    Email,
    Comment,
} from './style';

function App() {
    const [user, setUsers] = useState([]);
    const [userPosts, setUsersPosts] = useState([]);
    const [comments, setComments] = useState([]);
    const [errorRequest, setErrorRequest] = useState(false);
    const { register, handleSubmit, watch } = useForm();
    let watchUser = watch('userId');
    let watchPost = watch('userPost');

    return (
        <div>
            <InputContainer>
                <InputWrapper>
                    <SelectInput name="userId" ref={register()}>
                        <option value="">Choose a user</option>
                        {user.map((value) => (
                            <option value={value.id} key={value.id}>
                                {value.username}
                            </option>
                        ))}
                    </SelectInput>
                </InputWrapper>
                <InputWrapper>
                    <SelectInput name="userPost" ref={register()}>
                        <option value="">Choose a post</option>
                        {userPosts.map((value) => (
                            <option value={value.id} key={value.id}>
                                {value.title}
                            </option>
                        ))}
                    </SelectInput>
                </InputWrapper>
            </InputContainer>
            <h1>Comments</h1>
            {comments.map((value) => (
                <div key={value.id}>
                    <Email>{value.email}</Email>
                    <Comment>{value.body}</Comment>
                    <hr />
                </div>
            ))}
        </div>
    );
}

export default App;

our app would look like this

important things:

import { getUsers, getUsersPosts, getUsersComments } from ‘./Requests’: in this way, we call our request, by the way, we will need to use async await logic in our useEffect to manage the result in every change.

let watchUser = watch(‘userId’): we are using react hook form, so we need to use the watch function, for every select value, in this way we save the value everytime that the select change.
lets fill our first select, we need the user when the component is ready so we need to use useEffect

useEffect(() => {
        async function fetchInitialData() {
            const response = await getUsers();
            response.errors ? setErrorRequest(true) : setUsers(response);
        }

        fetchInitialData();
    }, []);

In this case, we will use useEfect to fill our first select, as I mentioned we will call our request function at this moment, but it will be inside an async await, if you do not do it like that, the value that I will be receiving at the beginning of the component is a promise of pending state, with async await we make sure that this is fulfilled and resolved.

after that we take advantage of axios, this if there is an error create the error object, we validate if it exists otherwise we proceed to fill our first select.

useEffect(() => {
        setUsersPosts([]);
        setComments([]);
        async function fetchPosts() {
            const response = await getUsersPosts(watchUser);
            response.errors ? setErrorRequest(true) : setUsersPosts(response);
        }
        if (watchUser) {
            fetchPosts();
        }
    }, [watchUser]);

the second useEffect is very similar but with two variants, in our arrangement of dependencies put watchUser since this is the variable that contains the value of the user every time it changes, the second is to clean the posts and comments.
this so that at the time the new values are being loaded, we will not see the old ones on the screen, the correct way would be to place a loading status, but that improvement is on your side.
Our second use Effect will be similar, only that we will not clear our previous values since the previous function already performed that task.
We will only change the value of our dependency array for watchPost.

if (watchUser) {
            fetchPosts();
        }

this little piece of code, help us to avoid send request when the user has no values, so we need to keep clean our calls, otherwise we will produce so many unnecessary requests for the api.

Complete code:

Github Repo