Решил тут на днях обновиться до свежего React 18, потому что в мире клиентской логики за такими вещами лучше следить, иначе окажешься в ситуации, когда переписывать надо вообще всё. Хотя, в любом случае окажешься, но не так быстро.
В новом релизе они решили поменять способ установки корневого контейнера (или как это по-рюсски?)
// Было
import { render } from ‘react-dom’;
import App from './App'
const container = document.getElementById('root')
ReactDOM.render(
<React.StrictMode><App /></React.StrictMode>,
contaner,
)
// Стало
import { createRoot } from 'react-dom/client';
import App from './App'
const container = document.getElementById('root')
const root = createRoot(container!)
root.render(<React.StrictMode><App /></React.StrictMode)
Во время рефакторинга я обновил “в том числе и это”, а потом целый час дебажил почему все actions во всём проекте стали вызываться по два раза.
А потому что upgrade notes надо читать внимательнее:
In React 18, StrictMode gets an additional behavior to ensure it’s compatible with reusable state. When Strict Mode is enabled, React intentionally double-invokes effects (mount -> unmount -> mount) for newly mounted components. А в компонентах что? useEffect, а в useEffect дёргается dispatch и API.
Такое поведение наблюдается только в development mode и только с использованием StrictMode. Они называют это фичей, которая помогает отлавливать баги и форсит использование pure functions. Я же в гробу видал такое поведение, поэтому убираем StrictMode из корня и живём нормальной жизнью root.render(<App />)
Заебали всё ломать.
