How to call a function just after state update

Question

As setState is async method in react. Is there any alternate to work with callback.

Note1 : I can use useEffect as it cause to unlimited function call.

Note2 : Also I can't use function2 without reference as it's being used in many places.

const [state,setState] = useState([]);


const data = []; // data of 1000 
const function1 = (name) => {
    const tempState = data.filter(ele => ele.name == name);
    setState(tempState);
    function2(tempState[0])
 }

const function2 = (element) => {
    const tempState = state.filter(ele => ele.id == element.id);
    setState(tempState);
}

Above code always returns [] . possible reason I can find is function2 has called before setState. That is filtering empty array that's why I'm getting mpty array.

As mention in code if I use useEffect then to call function2(state[0]). But inside function2 we have setState method call which makes re-render again & again.

is there any possibility where I can use callback method like this

setState(tempState,() => function2(state[0]) );

Don't reference the state in the other function, pass the other function the new state value instead. — CertainPerformance, Jun 03 '22 at 19:50
@CertainPerformance Is it possible without creating new state. as If I use another state U have to manage both states. — pranjal85, Jun 03 '22 at 19:54
Yes - like I just said, just pass the new state to the function - no need to create anything new — CertainPerformance, Jun 03 '22 at 19:55
you mean like this const function2 = () => { const tempState = state.filter(ele => ele.id == state[0].id); setState(tempState); } — pranjal85, Jun 03 '22 at 19:57

How to call a function just after state update

0 Answers0