I'm developing an React JS application that suppose to run on mobile devices.
Here is the code excerpts from the app:
index.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
App.tsx:
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import {Header} from "./Components/header"
import {Footer} from "./Components/footer"
import {Sidebar} from "./Components/sidebar"
//...
const listener = () => {
console.log("Main listener")
};
function App() {
const media = window.matchMedia('(min-width: 700px)');
media.addEventListener("change", listener);
return (
<Router>
<div className="App">
<Header />
<Sidebar />
<Footer />
//...
</div>
</Router>
);
}
export default App;
The problem is that the change event handler function (listener) is called TWICE! when I resize the browser window. I've read investigated that the reason for that is the React Strict Mode tag. As the official doc says the Strict Mode makes double-invoking the following functions:
Class component constructor, render, and shouldComponentUpdate methods
Class component static getDerivedStateFromProps method
Function component bodies
State updater functions (the first argument to setState)
Functions passed to useState, useMemo, or useReducer
My question is WHY the binded event is called TWICE since the doc doesn't list the event handlers as being double invoked!?
It that context WHAT finally makes the change event being invoked twice!?
This is React's StrictMode proactively bringing a bug to your attention. You should not subscribe to events at the top level of a component function, because that's called every time the component is rendered, so every time you add a new subscription to the event. When you have multiple subscriptions to an event (on different event source objects), you get multiple callbacks to your event callback (one for each subscription).
Instead, subscribe once in a useEffect callback with an empty dependencies array (and unsubscribe from a cleanup callback you return from it), details here.
function App() {
// An effect only called once on mount (empty deps array)
useEffect(() => {
// Subscribe once
const media = window.matchMedia("(min-width: 700px)");
media.addEventListener("change", listener);
// Unsubscribe on unmount
return () => {
media.removeEventListener("change", listener);
};
}, []);
// ...
}
In a comment you've asked:
...can You please explain me WHY doesn't the following explicit multiple event subscription:
media.addEventListener("change", listener); media.addEventListener("change", listener)
Because in that code, you're calling addEventListener twice on the same MediaQueryList and passing in the same event handler (listener). If you add the same listener for the same event to the same object twice, the second time is ignored (by the DOM event system; different systems handle it differently).
But that's not what your component is doing. Your component function runs more than once, and each time it creates a new MediaQueryList and adds a handler to it, like this:
const listener = () => {
console.log("listener fired");
};
const YourComponent = () => {
const media = window.matchMedia("(min-width: 700px)");
media.addEventListener("change", listener);
};
YourComponent();
YourComponent();Or to put it even more clearly:
const media1 = window.matchMedia("(min-width: 700px)");
media1.addEventListener("change", listener);
const media2 = window.matchMedia("(min-width: 700px)");
media2.addEventListener("change", listener);
Since they're different MediaQueryList objects, the listener gets added every time (once to each object).
If you run that snippet then change your browser size so the listener fires, you'll see it fires twice.