Component will preserve state after unmounting it - reactjs

Question

Component will preserve state even after unmounting it
I'm building a feedback form with Formik and want to move from class components to hooks but face mentioned difficulties.
function Feedback(props) {
const [fileInfo, setFileInfo] = useState("");
const [feedbackStatus, setFeedbackStatus] = useState("");
let timer = null;
useEffect(() => {
const status = props.feedbackResponse.status;
if (status) {
if (status >= 200 && status < 300) {
setFeedbackStatus("success");
timer = setTimeout(() => {
props.history.goBack();
}, 2500);
} else if (status === "pending") {
setFeedbackStatus("pending");
} else {
setFeedbackStatus("error");
}
}
return () => {
clearInterval(timer);
}
}, [props.feedbackResponse.status]);
// ...code ommited for brevity
}
This effect runs succesfully after my form submission while waiting for a server response. Feedback component is a react-router modal component, if it matters. However, if I re-open that modal, I see a success message instead of a new form. In my return I am conditionally rendering a success message if feedbackStatus === "success" or a form that, depending on a server response, might display an error message otherwise. My class component works fine with this code:
componentDidUpdate(prevProps) {
const status = this.props.feedbackResponse.status;
if (prevProps.feedbackResponse.status !== status) {
if (status >= 200 && status < 300) {
this.setState({feedbackStatus: "success"});
this.timer = setTimeout(() => {
this.props.history.goBack();
}, 2500);
} else if (status === "pending") {
this.setState({feedbackStatus: "pending"});
} else {
this.setState({feedbackStatus: "error"});
};
}
}
componentWillUnmount() {
clearInterval(this.timer);
}
Expected output: reopening this modal component after a successful form submit should render a new form but it renders a previous' submit status. This leads me to think that I'm not unmounting my Feedback component at all but where's my mistake then?

Answer 1

You can use <Feedback key={someKey} />.
This will ensure that a new instance of Feedback component is made when you re-open it, thus your old success/failure messages will be erased from the state.

Answer 2

The above behaviour happens because the effect is run on initial render as well and in that case props.feedbackStatus might be preserved from the previous instances.
Since you only wish to execute the effect when the component updates, you would need to stop execution of useEffect on initial render which happens even when you pass values to the dependency array. You can do that using useRef
function Feedback(props) {
const [fileInfo, setFileInfo] = useState("");
const [feedbackStatus, setFeedbackStatus] = useState("");
const isInitialRender = useRef(true);
let timer = null;
useEffect(() => {
if(isInitialRender.current === true) {
isInitialRender.current = false;
} else {
const status = props.feedbackResponse.status;
if (status) {
if (status >= 200 && status < 300) {
setFeedbackStatus("success");
timer = setTimeout(() => {
props.history.goBack();
}, 2500);
} else if (status === "pending") {
setFeedbackStatus("pending");
} else {
setFeedbackStatus("error");
}
}
}
return () => {
clearInterval(timer);
}
}, [props.feedbackResponse.status]);
}