React useSyncExternalStore: Стейт менеджер за 55 строчек кода

В React сообществе постоянно бушуют холивары: какой стейт менеджер выбрать. Но может не выбирать?
С появлением в React useSyncExternalStore можно написать свой простой стейт менеджер за 55 строк кода. В этом видео мы в режиме лайв кодинга напишем свой СТМ и перепишем небольшое приложение с его использованием. А также разберём, какие есть плюсы и минусы у такого решения.

[@whiteguards43]

такой вопрос, почему ты не будешь использовать useSyncExternalStore, а будешь юзать redux вместо него?

[@vytautasvasiliauskas5500]

thnx

[@stepanrudiak95]

Код можно ?

[@user-mu7ps6qx7j]

Добрый день. Уточните, пожалуйста, как изменится useAtom() при использовании в Next.js?

[@paromovevg]

Если не нужен SSR, то никак
Если нужен, то придётся серьезно доработать

[@user-mu7ps6qx7j]

@@paromovevg Мой вариант вашей функции:

[@user-mu7ps6qx7j]

@@paromovevg import { useEffect, useState } from 'react'
interface Store {
subscribe(cb: () => void): () => void
getState(): T
setState(newState: T): void
}
export const createStore = (initialState: T): Store => {
let state = initialState
let listeners = new Set void>()
return {
subscribe: cb => {
listeners.add(cb)
return () => {
listeners.delete(cb)
}
},
getState: () => state,
setState: newState => {
state = newState
listeners.forEach(listener => listener())
},
}
}
export const useStore = (store: Store, selector: (state: T) => F): F => {
const [value, setValue] = useState(selector(store.getState()))
useEffect(() => {
const listener = () => {
setValue(selector(store.getState()))
}
return store.subscribe(listener)
}, [store, selector])
return value
}

[@user-mu7ps6qx7j]

@@paromovevg Что тут не так? 40 строк и нет проблемы с SSR...