I have the following pseudo code
const handleUploadValidateResult = useCallback(e => {
if (everything good) {
do something
} else {
do something else
}
}, []);
useEffect(() => {
const eventName = `${context}_${type}_${index}`;
window.addEventListener(eventName, e => {
handleUploadValidateResult(e);
});
return () => {
window.removeEventListener(eventName, e => {
handleUploadValidateResult(e);
});
};
}, [type, index]);
What is the execution order for the return statement
return () => {
...
}
When type or index got changed, is return statement executed
before useEffect?
or after useEffect?
Your useEffect it called after type or index changes. return function is called before the component is unmounted.
Related
What I am trying to do is to update the reset the countdown after changing the status.
There are three status that i am fetching from API .. future, live and expired
If API is returning future with a timestamp, this timestamp is the start_time of the auction, but if the status is live then the timestamp is the end_time of the auction.
So in the following code I am calling api in useEffect to fetch initial data pass to the Countdown and it works, but on 1st complete in handleRenderer i am checking its status and updating the auctionStatus while useEffect is checking the updates to recall API for new timestamp .. so far its working and 2nd timestamp showed up but it is stopped ... means not counting down time for 2nd time.
import React, { useEffect } from 'react';
import { atom, useAtom } from 'jotai';
import { startTimeAtom, auctionStatusAtom } from '../../atoms';
import { toLocalDateTime } from '../../utility';
import Countdown from 'react-countdown';
import { getCurrentAuctionStatus } from '../../services/api';
async function getAuctionStatus() {
let response = await getCurrentAuctionStatus(WpaReactUi.auction_id);
return await response.payload();
}
const Counter = () => {
// component states
const [startTime, setStartTime] = useAtom(startTimeAtom);
const [auctionStatus, setAuctionStatus] = useAtom(auctionStatusAtom);
useEffect(() => {
getAuctionStatus().then((response) => {
setAuctionStatus(response.status);
setStartTime(toLocalDateTime(response.end_time, WpaReactUi.time_zone));
});
}, [auctionStatus]);
//
const handleRenderer = ({ completed, formatted }) => {
if (completed) {
console.log("auction status now is:", auctionStatus);
setTimeout(() => {
if (auctionStatus === 'future') {
getAuctionStatus().then((response) => {
setAuctionStatus(response.status);
});
}
}, 2000)
}
return Object.keys(formatted).map((key) => {
return (
<div key={`${key}`} className={`countDown bordered ${key}-box`}>
<span className={`num item ${key}`}>{formatted[key]}</span>
<span>{key}</span>
</div>
);
});
};
console.log('starttime now:', startTime);
return (
startTime && (
<div className="bidAuctionCounterContainer">
<div className="bidAuctionCounterInner">
<Countdown
key={auctionStatus}
autoStart={true}
id="bidAuctioncounter"
date={startTime}
intervalDelay={0}
precision={3}
renderer={handleRenderer}
/>
</div>
</div>
)
);
};
export default Counter;
You use auctionStatus as a dependency for useEffect.
And when response.status is the same, the auctionStatus doesn't change, so your useEffect won't be called again.
For answering your comment on how to resolve the issue..
I am not sure of your logic but I'll explain by this simple example.
export function App() {
// set state to 'live' by default
const [auctionStatus, setAuctionStatus] = React.useState("live")
React.useEffect(() => {
console.log('hello')
changeState()
}, [auctionStatus])
function changeState() {
// This line won't result in calling your useEffect
// setAuctionStatus("live") // 'hello' will be printed one time only.
// You need to use a state value that won't be similar to the previous one.
setAuctionStatus("inactive") // useEffect will be called and 'hello' will be printed twice.
}
}
You can simply use a flag instead that will keep on changing from true to false like this:
const [flag, setFlag] = React.useState(true)
useEffect(() => {
// ..
}, [flag])
// And in handleRenderer
getAuctionStatus().then((response) => {
setFlag(!flag);
});
Have a look at the following useCountdown hook:
https://codepen.io/AdamMorsi/pen/eYMpxOQ
const DEFAULT_TIME_IN_SECONDS = 60;
const useCountdown = ({ initialCounter, callback }) => {
const _initialCounter = initialCounter ?? DEFAULT_TIME_IN_SECONDS,
[resume, setResume] = useState(0),
[counter, setCounter] = useState(_initialCounter),
initial = useRef(_initialCounter),
intervalRef = useRef(null),
[isPause, setIsPause] = useState(false),
isStopBtnDisabled = counter === 0,
isPauseBtnDisabled = isPause || counter === 0,
isResumeBtnDisabled = !isPause;
const stopCounter = useCallback(() => {
clearInterval(intervalRef.current);
setCounter(0);
setIsPause(false);
}, []);
const startCounter = useCallback(
(seconds = initial.current) => {
intervalRef.current = setInterval(() => {
const newCounter = seconds--;
if (newCounter >= 0) {
setCounter(newCounter);
callback && callback(newCounter);
} else {
stopCounter();
}
}, 1000);
},
[stopCounter]
);
const pauseCounter = () => {
setResume(counter);
setIsPause(true);
clearInterval(intervalRef.current);
};
const resumeCounter = () => {
setResume(0);
setIsPause(false);
};
const resetCounter = useCallback(() => {
if (intervalRef.current) {
stopCounter();
}
setCounter(initial.current);
startCounter(initial.current - 1);
}, [startCounter, stopCounter]);
useEffect(() => {
resetCounter();
}, [resetCounter]);
useEffect(() => {
return () => {
stopCounter();
};
}, [stopCounter]);
return [
counter,
resetCounter,
stopCounter,
pauseCounter,
resumeCounter,
isStopBtnDisabled,
isPauseBtnDisabled,
isResumeBtnDisabled,
];
};
When I upgraded nextjs application from 9 to 12. There were some errors shown, that were not being taken take care of in previous version. One of them was: typeError: destroy is not a function
In the console I could see it mentioned next-dev.js?3515:25 Warning: useEffect must not return anything besides a function, which is used for clean-up. You returned null. If your effect does not require clean up, return undefined (or nothing
Not sure it was because of the update nextjs has become too strict during it's checking, but I will put it down the solution for myself and everyone.
In almost all of the cases this error occurs when you tried to return anything from your useEffect hook that is not a function.
The fault,
useEffect(() => someFunction());
or
useEffect(() => {
return someFunction();
});
The Fix,
useEffect(() => {
someFunction();
});
For more information read the following article,
https://typeofnan.dev/fix-uncaught-typeerror-destroy-is-not-a-function-in-react/
I also got the same issue, i was upgraded my Next App from v9 to v12. And i found it because the useEffect
My code before was like (my Next v9) =
useEffect(() => {
return () => {
removeEventListener("blur", updateWarning);
const inputFile = document.getElementById("input-file-ujian");
if (inputFile) {
inputFile.removeEventListener("click", (e) => {
window.removeEventListener("blur", updateWarning);
});
inputFile.removeEventListener("change", handleChange);
}
const videos = document.getElementsByClassName("note-video-clip");
for (let i = 0; i < videos.length; i++) {
videos[i].removeEventListener("mouseleave", () => {
window.addEventListener("blur", updateWarning);
});
videos[i].removeEventListener("mouseenter", () => {
window.removeEventListener("blur", updateWarning);
});
}
};
}, [pesertaUjian, warning]);
and this is my Next v12 (I remove the return code) =
useEffect(() => {
removeEventListener("blur", updateWarning);
const inputFile = document.getElementById("input-file-ujian");
if (inputFile) {
inputFile.removeEventListener("click", (e) => {
window.removeEventListener("blur", updateWarning);
});
inputFile.removeEventListener("change", handleChange);
}
const videos = document.getElementsByClassName("note-video-clip");
for (let i = 0; i < videos.length; i++) {
videos[i].removeEventListener("mouseleave", () => {
window.addEventListener("blur", updateWarning);
});
videos[i].removeEventListener("mouseenter", () => {
window.removeEventListener("blur", updateWarning);
});
}
}, [pesertaUjian, warning]);
I don't know why, I just remove all my return code in my useEffect and it's work for me
Update:
Update, i found that if you are using useEffect and async await. Don't use like it
useEffect(async() => {},[])
but you can create function async await outside the useEffect, for example
const yourFunction = async () => {}
useEffect(() => yourFunction(),[])
There were a lot of place in the code which I am maintining where useEffect was returning null like:
useEffect(() => {
if (variantSelected) {
const productViewTrackingTimeout = setTimeout(
useProductViewTracking({
...blah blah
}),
1000
);
return () => {
clearTimeout(productViewTrackingTimeout);
};
}
return null;
}, [variantSelected, productTitle, router]);```
I removed all return null values, and just putting a return works too. But not any value.
I've been trying to convert the following code from React Class Component to Function Component but I've been having problems since I've gotten the error "Expected an assignment or function call and instead saw an expression. eslint no-unused-expressions"
componentDidMount() {
this.startingSequence();
}
startingSequence = () => {
setTimeout(() => {
this.setState(
() => {
return {
textMessageOne: `A wild ${this.state.enemyName} appeared!`,
enemyFaint: false
};
},
() => {
setTimeout(() => {
this.setState(
{
textMessageOne: `Go ${this.state.playerName}!`,
playerFaint: false
},
() => {
setTimeout(() => {
this.setState({
textMessageOne: ""
});
}, 3000);
}
);
}, 3000);
}
);
}, 1000);
};
This is the code I ended up with while trying to convert it to Function Component:
const startingSequence = () => {
setTimeout(() => {
() => {
setTextMessageOne(state => {
state = (`Wild ${enemyName} appeared!`)
return state;})
setEnemyFaint(state => {
state = false
return state;})
}
,
() => {
setTimeout(() => {
setTextMessageOne(`Go ${playerName}!`),
setPlayerFaint(false)
,
() => {
setTimeout(() => {
setTextMessageOne("")
}, 3000);
}
}, 3000);
}
}, 1000);
};
useEffect(() => {
startingSequence();
})
EDIT:
Solution I got thanks to Kieran Osgood:
const startingSequence = () => {
setTimeout(() => {
setTextMessageOne(`Wild ${enemyName} appeared!`)
setEnemyFaint(false)
setTimeout(() => {
setTextMessageOne(`Go ${playerName}!`)
setPlayerFaint(false)
setTimeout(() => {
setTextMessageOne('')
}, 3000)
}, 3000)
}, 1000)
}
useEffect(() => {
startingSequence()
}, [enemyFaint])
In the functional component syntax you can pass the new state in directly OR use the function syntax if you need access to the previous state, however the state variable is not assignable so when you're doing this:
setTextMessageOne(state => {
state = `Wild ${enemyName} appeared!`
return state
})
You could do it simply like this:
setTextMessageOne(`Wild ${enemyName} appeared!`)
Function syntax is helpful for lets say a counter, where we're incrementing a number, and avoids getting stale closures overlapping each other.
setCounter(previousState => {
return previousState + 1
})
// OR
setCounter(previousState => previousState + 1)
So amending that, the other issue is theres a lot of nested arrow functions which seem to stem from the previous usage of the second argument to setState which is a callback to be executed immediately after the state is set - this doesn't exist in functional components, so you should probably refactor this function to be something more along the lines of
// this is just a basic representation, consider combining these to objects etc.
const [enemyName, setEnemyName] = React.useState('')
const [enemyFaint, setEnemyFaint] = React.useState(false)
const [playerFaint, setPlayerFaint] = React.useState(false)
const [textMessageOne, setTextMessageOne] = React.useState('')
const [playerName, setPlayerName] = React.useState('')
const startingSequence = () => {
setTimeout(() => {
setTextMessageOne(state => {
state = `Wild ${enemyName} appeared!`
return state
})
setEnemyFaint(false)
}, 1000)
}
React.useEffect(() => {
setTimeout(() => {
setTextMessageOne(`Go ${playerName}!`)
setPlayerFaint(false)
setTimeout(() => {
setTextMessageOne('')
}, 3000)
}, 3000)
}, [enemyFaint])
Then you want to take these further to extract into custom hooks so its more clear your intent in the flow of your component but generally this is the way in functional components to respond to state changes, via the useEffect
I have a function that sets a reminder to pop up on the screen, but the message wont go away. Am I using the clearInterval with react hooks correctly in this function?
useEffect(() => {
const interval = setInterval(() => {
handleReminder(activeReminders);
}, 1000);
return () => clearInterval(interval);
}, [activeReminders]);
useEffect(() => {
const notesWithReminder = getNotesWithReminder(notes);
if (notesWithReminder.length > 0) {
setActiveReminders(notesWithReminder);
}
}, [notes]);
function getNotesWithReminder(notes) {
return notes.filter((note) => note.reminder && !note.isReminderShow);
}
function handleReminder(reminders) {
const activeRem = reminders.find((rem) => {
const now = Date.now();
const getRemTime = new Date(rem.reminder).getTime();
return getRemTime <= now;
});
setActiveReminder(activeRem);
setShowNotifyModal(true);
}
Message was not dismissing due to if statement which created a memory leak.
solution:
useEffect(() => {
const notesWithReminder = getNotesWithReminder(notes);
setActiveReminders(notesWithReminder);
}, [notes]);
useEffect(() => {
return () => {
let tb = [...Array(row.length).keys()].map(index => {
return header.reduce((ob, key) => {
return {
...ob,
[key]: row[index][key]
}
}, {})
})
if (dimension) {
tb = tb.map((entity, index) => {
return {
...entity,
'': row[index].hdr
}
})
}
dispatch(change(form, `table.${activeButton}`, tb))
}
}, [])
I want to execute some code on component unmount, I know that achieve this you can by using this approach with hooks :
useEffect(() => {
return () => {
// some code here
}
}, [])
But in first code snippet I have some values which are not static , and for getting last version of this data , I have to pass it to [row,header], and this is the problem , does it mean that I can't execute this code on unmount ? or exist some another way to make it ?
The fact that you want to execute code on unmount and access the updated data, you would need to make use of useRef and useEffect
const rowRef = useRef(row);
const headerRef = useRef(header);
useEffect(() => {
rowRef.current = row;
headerRef.current = header;
}, [row, header]);
useEffect(() => {
return () => {
let tb = [...Array(rowRef.current.length).keys()].map(index => {
return headerRef.current.reduce((ob, key) => {
return {
...ob,
[key]: rowRef.current[index][key]
}
}, {})
})
if (dimension) {
tb = tb.map((entity, index) => {
return {
...entity,
'': rowRef.current[index].hdr
}
})
}
dispatch(change(form, `table.${activeButton}`, tb))
}
}, [])