CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
web devlopment king
web devlopment king

Reputation: 354

Asynchronous Behaviour for useParams hook

How do we manage the behaviour of useParams How it triggers in before or after useEffect

import react,{useEffect} from 'react'
import {useParams} from 'react-router-dom'

export default Slip(){
  const {slug} = useParams()
  useEffect(() => {
    // In my application role of slug is very important for application behaviour 
    const fetchdata = async () => {
      const getd = await axios.post('backend.com',{slug})
      // Here slug needs to be loaded completely without it application can't behave properly 
    }
  },[])
}

My company is working on a banking project where we take slug from parameter which is very important to get loaded to delete the transaction

So is there any way for asynchronous Behaviour of useParams or **when parameters are loaded then only code will execute **

Upvotes: -1

Views: 53

Answers (2)

Career Yash
Career Yash

Reputation: 11

I think you will have no problem useParams is not the react hook, it's officially provided by react-router-dom

So technically,it will process the slug with your component and provide it before that route code is loaded

you can do simple validation on backend or frontend

if(!slug) return

Upvotes: 1

David
David

Reputation: 219037

If a non-empty value for slug is required before performing the logic in useEffect, check the value before performing that logic. You can also add slug to the dependency array for the effect so it will re-run whenever the value changes. For example:

  useEffect(() => {

    if (!slug) return; // <-- return early if no value is found

    // the rest of the effect...

  }, [slug]) // <-- re-run the effect if the value changes

Upvotes: 2

Related Questions