65173e9f93
The useAlert hook was being given a new payload object every time it was called, defeating any memoization happening inside. It was also re-calling it’s useEffect hook when alertId changed, which it was changing itself. That’s a no-no.
27 lines
774 B
JavaScript
27 lines
774 B
JavaScript
/* eslint-disable import/prefer-default-export */
|
|
import { useContext, useState, useEffect } from 'react';
|
|
import UserMessagesContext from './UserMessagesContext';
|
|
|
|
export function useAlert(isVisible, {
|
|
code, text, topic, type, payload, dismissible,
|
|
}) {
|
|
const { add, remove } = useContext(UserMessagesContext);
|
|
const [alertId, setAlertId] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (isVisible && alertId === null) {
|
|
setAlertId(add({
|
|
code, text, topic, type, payload, dismissible,
|
|
}));
|
|
} else if (!isVisible && alertId !== null) {
|
|
remove(alertId);
|
|
setAlertId(null);
|
|
}
|
|
return () => {
|
|
if (alertId !== null) {
|
|
remove(alertId);
|
|
}
|
|
};
|
|
}, [isVisible, code, text, topic, type, dismissible, payload]);
|
|
}
|