Async run function after useEffect

Question

I was wondering how it is possible to run a function after you use the useEffect to fetch data, where the function is manipulating the data after its been pulled?

import React, { useState, useEffect } from 'react';

const Result = (props) => {
    const [ playerName, setPlayerName ] = useState('');
    const [ playerChoice, setPlayerChoice ] = useState(null);
    const [ computerChoice, setComputerChoice ] = useState(null);
    const [ result, setResult ] = useState(null);

    useEffect(() => {
        setPlayerName(props.location.state.playerName);
        setPlayerChoice(props.location.state.playerChoice);
        setComputerChoice(generateComputerChoice);
        setResult(getResult())
    }, []);

    const getResult = () => {
        // code that runs after the setting of the playerName and playerChoice. Will return "Win", "Lose", or "Draw"

    };

    const generateComputerChoice = () => {
        const outcomes = [ 'Rock', 'Paper', 'Scissors' ];
        return outcomes[Math.floor(Math.random() * outcomes.length)];
    };

    return (
        <div className="app-container">
            <strong>YOU {result}</strong>
            <br />
            <strong>{playerName}</strong> chose <strong>{playerChoice}</strong>
            <br />
            <strong>Computer</strong> chose <strong>{computerChoice}</strong>
        </div>
    );
};

export default Result;

So here in this example I grab the playerName and playerChoice from a previous page, and then add that to my useState on page load.

After that I randomly generate the computerChoice.

However, after that I want to use the playerChoice amd computerChoice that has been added to the state and use that to see if the game is a win, lose or draw.

result ends up being null because I assume that by the time the getResult function is called, the states haven't been set yet.

Do you guys know what should be done in this situation? Seems like this could be a common thing considering you might wanna grab data from an API and then do something with that data before wanting to render it.

The reason you're having trouble is that your component is doing too much. You are doing the following things: fetching data, generating random values, querying previous states, comparing values, and displaying results. All in one component! If it were me, I'd have a component that took a human choice and a computer choice and displayed the results. I'd have a component that simply took player input and called a callback. And I'd have a stateful common ancestor that handled the fetching and rendering of the children. — Jared Smith
– Jared Smith, Commented Sep 7, 2019 at 23:23
Thanks all for the responses. In the end I refactored to have the computer generated choice in the previous component page, where the player also makes their choice. This makes both the playerChoice and computerChoice be passed in as props together, meaning that that data can be used without worrying about async. I am interested however in how this problem might be solved anyways. For example if we call from an api and then use that api data to be filtered down (lets say sort it alphabetically or something), how would we use hooks to do that after the useEffect api call? — pyan
– pyan, Commented Sep 8, 2019 at 10:34

Jonas Wilms · Accepted Answer · 2019-09-07 23:32:24Z

1

That first effect is unneccessary. Just do

  const [playerName, setPlayerName] = useState(props.location.state.playerName);

answered Sep 7, 2019 at 23:32

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Praneeth Paruchuri Over a year ago

Isn't this an anti-pattern? There's no use for setting props to state when the component doesn't need to modify the state in the future.

Drew Reese · Accepted Answer · 2019-09-08 00:38:36Z

Use the useMemo hook and add the state variables to its dependency array. It will memoize the result for each render cycle so it is only ever computed when playerName or playerChoice update.

const getResult = useMemo(() => {
    // code that runs after the setting of the playerName and playerChoice. Will return "Win", "Lose", or "Draw"

}, [playerName, playerChoice]);

Oops, I see now you're trying to save this to the result state variable, so you can either use a second useEffect with the same dependencies instead of the useMemo I suggested, or in your original snippet instead of calling a getResult() function you change the signature to getResult(name, choice) and call setResult with the current render cycle values (right from the props).

useEffect(() => {
    const { playerName, playerChoice } = props.location.state;
    setPlayerName(playerName);
    setPlayerChoice(playerChoice);
    setComputerChoice(generateComputerChoice);
    setResult(getResult(playerName, playerChoice));
}, []);

const getResult = (name, choice) => {
    // Will return "Win", "Lose", or "Draw"
};

Praneeth Paruchuri · Accepted Answer · 2019-09-08 00:16:57Z

setState is asynchronous and you'll be able to use the state only in the next render. Unlike in class components, hooks doesn't allow a callback after setting the state.

But looking at your component and assuming that is what the functionality of that would be, there's no reason for you to add playerName and playerChoice to the state of the component. You can use the data from the props itself.

import React, { useState, useEffect } from 'react';

const Result = (props) => {
    const {playerName, playerChoice} = props.location.state;
    const [ result, setResult ] = useState(null);
    const [computerChoice, setComputerChoice] = useState(null);

    useEffect(() => {
        setComputerChoice(generateComputerChoice());
        getResult();
    }, []);

    const getResult = () => {

     // You can get the playerName, playerChoice from the props.

     // You can also setResult here.

    };

    const generateComputerChoice = () => {
        const outcomes = [ 'Rock', 'Paper', 'Scissors' ];
        return outcomes[Math.floor(Math.random() * outcomes.length)];
    };

    return (
        <div className="app-container">
            <strong>YOU {result}</strong>
            <br />
            <strong>{playerName}</strong> chose <strong>{playerChoice}</strong>
            <br />
            <strong>Computer</strong> chose <strong>{computerChoice}</strong>
        </div>
    );
};

export default Result;

Hope this helps.

Collectives™ on Stack Overflow

Async run function after useEffect

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related