Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

351
Visualizações
How to setup like a function should be called only one time even after reload

I'm trying to make a Post request on component Mount. But if user reloads the page or states changes, then the function is called again as I'm useEffect and it sends the request again. But I want any better thing where the Post request should be made once and if even the page refreshes the shouldn't be called again if it has been called.

I'm using the Function base component. and make Post requests using redux.

const Main = () => {
    // ....

   // Here I'm forcing user to login if there's user is logged in then want to make a silent post request, But it sends request everytime on state change.
   useEffect(() => {
    getLocalStorage()
    if (!userInfo) {
      setModalShow(true)
    }
    if (userInfo) {
      dispatch(postRequest())
      setModalShow(false)
    }
  }, [userInfo])
  return (
    <div>Some JSX </div>
  )
}

export default Main

So need your help to fix that issue. Can we use localStorage to store the information either the post request is already have been made or any other better idea?

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

Best way is to use localstorage, not sure if my placements of setting ang getting value from localstorage are on the right spot.

const Main = () => {
    // ....

   // Here I'm forcing user to login if there's user is logged in then want to make a silent post request, But it sends request everytime on state change.
   useEffect(() => {
    getLocalStorage()
    // Check if the value of logged is true initiali will be false until the 
    // first request if made
    if (!!localStorage.getItem('logged')) {
      setModalShow(true)
    }
    if (userInfo) {
      dispatch(postRequest())
      setModalShow(false)
      // set the value when the request is finished
      localStorage.setItem('logged', true)
    }
  }, [userInfo])
  return (
    <div>Some JSX </div>
  )
}

export default Main
about 4 years ago · Juan Pablo Isaza Relatório

0

There is a package named redux-persist that you can save the state, for example in localStorage. You can use this package, and send post request if there is not any data in state.

about 4 years ago · Juan Pablo Isaza Relatório

0

Using localStorage for that purpose is pretty useful, you can save the information on post request whether it was made or not.

For a basic setup; this could be like that:

const postRequestStatus = localStorage.getItem('postRequestMade') ? JSON.parse(localStorage.getItem('postRequestMade')) : null

useEffect(() => {
    getLocalStorage()
    if (!userInfo) {
      setModalShow(true)
    }
    if (userInfo) {
      setModalShow(false)
      if (!postRequestStatus) {
        dispatch(postRequest())
        console.log('Post Request Made')
        localStorage.setItem('postRequestMade', true)
      }
    }
  }, [userInfo, postRequestStatus])

Here's a catch. As far there is information in localStorage, of postRequestMade true . The request won't be made. So some point on the site you should set any logic to clear it out where it is necessary.

Secondly, What if the request was not successful if there was an error from the server. Then, you should also consider error handling as well. As you mentioned you are using redux and I'm sure there would be Axios as well try the functionality like that:

useEffect(() => {
    getLocalStorage()
    if (!userInfo) {
      setModalShow(true)
    }
    if (userInfo) {
      setModalShow(false)
      if (!postRequestStatus) {
        dispatch(postRequest())
        // That block will take care if request was successful 
        // After a successful request postRequestMade should be set to true. 
        if (success) { 
           console.log('Successful Request')
           localStorage.setItem('postRequestMade', true)
         }
      }
    }
  }, [userInfo, postRequestStatus, success])
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda