How should I use React to display global error messages? - reactjs

Question

I have an App component at the top level, and then within that component, I have one called ErrorMessages.
I put my App component's state into a context, and then elsewhere in my app, if an error occurs, I set errors on the App component's context.
The App component will then pass the errors to ErrorMessages via prop, and then the error messages will display.
The problem is, I can't seem to clear out the error messages.
What I've tried so far is, using the cleanup mechanism of useEffect to clear the errorMessages.
Say I have a component called UserRegistration, the user doesn't enter an e-mail address, and I set an error "email address required", this displays just fine.
Now, when UserRegistration is unmounted, I want to clear the error messages out of the App context.
How might I achieve this?
This is my app component:
class App extends React.Component {
// For errors in the format of:
// [{message: "first_name missing..."}, {message: "Email address in use..."}]
setErrorMessages = (errors) => {
this.setState({errors}) }
// Other messages not in the format above. Can set "alert-warning" or
// "alert-success" type messages.
setStatusMessage = (statusType, statusMessage) => {
this.setState({statusType, statusMessage}) }
clearAllMessages = () => {
this.setState({errors: [], statusType: null, statusMessage: null}) }
setAuthToken = () => {}
setLoaded = (val) => { this.setState({loaded: val}) }
state = {
user: {},
loaded: false,
errors: [],
statusType: null,
statusMessage: null,
setErrorMessages: this.setErrorMessages,
clearAllMessages: this.clearAllMessages,
setStatusMessage: this.setStatusMessage,
setLoading: this.setLoading,
setLoaded: this.setLoaded,
setAuthToken: this.setAuthToken,
}
render() {
return (
<div className="App container">
<React.StrictMode>
<AppContext.Provider value={this.state}>
<BrowserRouter>
{this.state.statusMessage ?
<div className={"alert alert-" + this.state.statusType}>{this.state.statusMessage}</div> : null}
<ErrorMessages list={this.state.errors} />
{!this.state.loaded ? <LoaderWidget /> : null }
<IssueBrowser />
</BrowserRouter>
</AppContext.Provider>
</React.StrictMode>
</div>
);
}
}
If I use the cleanup mechanism of useEffect in a lower level component, I get the "maximum depth exceeded" error, and the page hangs.
Here's the component I'm calling useEffect in:
const UserRegistration = (props) => {
const appContext = useContext(AppContext)
const history = useHistory();
const registerUser = (event) => {
event.preventDefault()
appContext.setLoaded(false)
let payload = {
first_name: event.target.first_name.value,
last_name: event.target.last_name.value,
email_address: event.target.email_address.value,
password: event.target.password.value }
Users.create(payload)
.then(response => {
appContext.setStatusMessage("success", "User successfully registered.")
appContext.setLoaded(true)
history.push('/')
})
.catch(error => {
if (error.response.data.messages) { appContext.setErrorMessages(error.response.data.messages) }
appContext.setLoaded(true)
})
}
useEffect(() => {
return function cleanup() {
appContext.clearAllMessages()
// this just seems to hang, the app goes into an infinite loop at this point and freezes.
}
})
return (
<form onSubmit={registerUser}>
<div className="form-group">
<label htmlFor="first_name">First Name:</label>
<input name="first_name" type="text" className="form-control" />
</div>
<div className="form-group">
<label htmlFor="last_name">Last Name:</label>
<input name="last_name" type="text" className="form-control" />
</div>
<div className="form-group">
<label htmlFor="email_address">Email Address:</label>
<input name="email_address" type="text" className="form-control" />
</div>
<div className="form-group">
<label htmlFor="password">Password:</label>
<input name="password" type="password" className="form-control" />
</div>
<div className="form-group">
<label htmlFor="password">Confirm Password:</label>
<input name="password" type="password" className="form-control" />
</div>
<div className="form-group">
<input className="btn btn-primary form-control" type="submit" value="Register" />
</div>
</form>
)
}

Answer 1

Use events! Send a cleanAllErrors when the user closes the event.
In the same way listen for errors in the ErrorHandlingComponent and display errors.
If you want to make errors disapear after a timeout that is fine. For certain errors that is ok. Same here send a message. And if you want user interaction on some important error, send the message in the onClose of the error label!
Cheers

Answer 2

The reason why you're getting maximum depth exceeded is because your useEffect hook inside the UserRegistration component runs every time new props are received or you get new data through hooks.
This happens when your cleanup function gets triggered because it causes an update to your context and therefore causing an infinite re-render.
You should pass an empty dependency array so that the useEffect hook will behave similarly to a componentWillUnmount lifecycle method in a class component:
const UserRegistration = (props) => {
// ...
useEffect(() => {
return function cleanup() {
appContext.clearAllMessages();
}
// b/c of the empty dependency array
// this hook will only run once when
// the component renders for the first time, and
// it will run the cleanup function once,
// when it unmounts
}, []);
}