Почему при одном нажатии на кнопку в компоненте App
, useEffect
в компоненте NewTask
сразу объявляет и вызывает обработчик handleClickOutside
? Разве не должно быть так, чтобы первый клик (т.е. первый рендер) только добавлял (навешивал) обработчик handleClickOutside
, а уже на второй клик этот обработчик бы вызывался? Объясните, пожалуйста, почему так происходит? Как именно здесь работает React.
function App() {
const [clicked, setClicked] = React.useState(false);
return (
<div>
<button onClick={() => setClicked(true)}>Click Me</button>
{clicked && <NewTask clicked={clicked} />}
</div>
);
}
function NewTask({ clicked }) {
React.useEffect(() => {
const handleOutsideClick = () => {
console.log("Outside click detected");
};
if (clicked) document.addEventListener("click", handleOutsideClick);
return () => {
document.removeEventListener("click", handleOutsideClick);
};
}, [clicked]);
return <div>Hello World!</div>;
}
const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>
Codesandbox: https://codesandbox.io/s/mutable-morning-9hs448?file=/src/App.js