Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return

Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Error not caught ： There are fewer rendered hooks than expected . This may be caused by an unexpected early return statement .

This mistake means react Some hook functions to be rendered in advance hook Returned without execution . The possible error codes are as follows

export default ()=>{
    
	if(xxx) {
    
		return xxx; //  some hook Return before execution 
	}
	useEffect(()=>{
     xxx },[]);
	useMemo(()=>{
     xxx }, [])
	return <div>xxx</div>
}

The solution is to move the return statement to all hook after

export default ()=>{
    
	
	useEffect(()=>{
     xxx },[]);
	useMemo(()=>{
     xxx }, [])
	if(xxx) {
    
		return xxx;
	}
	return <div>xxx</div>
}