Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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 **

Tags:

2

Answers


  1. 0

    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
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search