isLoading on request is not working

Question

I am trying to put an isLoading on my application made with React but it is not working, I have my handleSearch function that is making the request, this function is being passed to my component which distributes the data via props to all other components until it reaches my search component that receives this function, I tried to put the isLoading but it is not working, it performs the request and dps enters my setInterval() but it does not arrow the isLoading as false, showing the setInterval infinitely. My function that makes the request

handleSearch = e => {
const value = e.target.value;
const keyCode = e.which || e.keyCode;
const ENTER = 13;

if (keyCode === ENTER) {
  setInterval(() => {
  console.log('ENTREI AQUI')
  this.setState({ isLoading: true });
  }, 1000); 
  axios
    //fazendo a requisição para a API usando a funçao getApiGitHubURL
    .get(this.getApiGitHubURL(value))
    .then(result => {
      this.setState({
        isLoading: false, 
        userinfo: {
          username: result.data.name,
          photo: result.data.avatar_url,
          login: result.data.login,
          repos: result.data.public_repos,
          followers: result.data.followers,
          following: result.data.following
        },
        repos: [],
        starred: []
      });
    })
    .catch(err => {
      console.log("ERRO: ", err);
      return <h1>Ops, deu algo errado !</h1>;
    });
}

};

My component that receives the function handleSearch via props

import React from "react";

function Search({ handleSearch }) {
  return (
    <div className="search">
      <input 
        type="search"
        onKeyUp={handleSearch}
      />
    </div>
  );
}

export default Search;

Note: I have tried to move forward the isLoading until I get to my bad search component I think I’m doing something wrong because it didn’t work, if you can help me I will be grateful, thank you !

Answer 1

Don’t use giving a delay use like this when the dom is updated by the new value in isLoading, executes the service routine that also gives a time and then when it finishes this request changes again the value of isLoading, example:

handleSearch = e => {
    const value = e.target.value;
    const keyCode = e.which || e.keyCode;
    const ENTER = 13;
    if (keyCode === ENTER) {            
        this.setState({ isLoading: true }, () => {
            axios               
                .get(this.getApiGitHubURL(value))
                .then(result => {
                  this.setState({
                    isLoading: false, 
                    userinfo: {
                      username: result.data.name,
                      photo: result.data.avatar_url,
                      login: result.data.login,
                      repos: result.data.public_repos,
                      followers: result.data.followers,
                      following: result.data.following
                    },
                    repos: [],
                    starred: []
                  });
                })
                .catch(err => {
                  console.log("ERRO: ", err);
                  return <h1>Ops, deu algo errado !</h1>;
                });
        });
    }
};

Within the this.setState a second function can be passed to when the update of the setState is executed right after this function. This delay it is better it produces a real value of each operation.