React - the useEffect hook

JavaScript
1

I am trying to call a function within the useEffect hook when the component first renders.
Can anyone suggest how i can do this without rewriting the function inside the useEffect function.

function reducer(currentState,newState){
	return{
		...currentState,
		...newState
	}
	}

function Game() {
	const [ { diceArray, locked }, setState ] = useReducer(reducer, {
		diceArray: [ 1, 2, 3, 4, 5 ],
		locked: [ false, false, false, false, false ]
    });
    useEffect(()=>{
        //shuffleArray
    },[])

	function shuffleArray() {
		const shuffledA = diceArray.map((d, i) => (locked[i] ? d : Math.ceil(Math.random() * 6)));
		setState({ diceArray: shuffledA });
		
	}

	return (
2

Put the function inside the hook, why are you trying to keep it outside?

If you want it outside, remove the setState, move it completely outside the hook and pass it the two arrays as arguments. Then inside the hook, you can just run setState({ diceArray: /* run function here */ }).

Also, if you’re just playing around with figuring out how useEffect works then this is maybe fine, but really there is nothing there that should be in a useEffect hook.

3

Thankyou for taking the time to reply.
I needed to call the function seperately and did not want to repeat code.
I have removed the useEffect as you suggested and so far so good.
Thanks again

4