Казалось бы, что может быть такого, в патчинге глобальных функций в javascript окружении?
Не так давно, сообществу удалось пропушить отмену манки-патчинга fetch командой next.js.
Но вы знали, что StrictMode патчит console.log?
Попробуйте вот этот код:
import "./styles.css";
import { useEffect, StrictMode } from "react";
import ReactDOM from "react-dom/client";
const rootElement = document.getElementById("root")!;
const root = ReactDOM.createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
function App() {
useEffect(() => {
console.info("useEffect fn called!");
}, []);
return <h1>Hello CodeSandbox</h1>;
}
И вы увидите, один лог "useEffect fn called!"
Но если добавить счетчик
let amount = 0;
export default function App() {
useEffect(() => {
console.info("useEffect fn called!", ++amount);
}, []);
return <h1>Hello CodeSandbox</h1>;
}
То, сразу будет заметна проблема:
useEffect fn called! 1
useEffect fn called! 2
И вы можете сказать: ну что такого, удобно же?
Но вам не кажется, что об этом можно было написать в документации?
https://react.dev/reference/react/StrictModeА еще можно дать флаг, чтобы выключить это поведение (может и есть, но в документации нет ничего!)
Отлаживать работу сложных компонентов, когда React вставляет палки в колеса на каждом шаге, это адовое действо!
Если хочется потыкать:
https://github.com/facebook/react/blob/main/packages/shared/ConsolePatchingDev.jsМожет это только у меня так? Оказывается, да!
В более поздних 17+ версиях react это поведение откатили.
Теперь подсвечивают второй лог более бледным цветом
Да здравствует здравый смысл, раз уж у нас нет нормального фреймворка
