Erik Mironov

1. Роутинг внутри модалки: Можно использовать библиотеку react-router-dom даже внутри модального окна для обеспечения роутинга между различными экранами.

Создайте отдельный <Switch> внутри модалки:

<Modal>
    <Switch>
        <Route path="/modal/presets" component={Presets} />
        <Route path="/modal/edit/:id" component={EditPhrase} />
        <Route path="/modal/create" component={CreatePhrase} />
        <Route path="/modal/delete/:id" component={DeletePhrase} />
        {/* ... */}
    </Switch>
</Modal>

2. Компоненты экранов: Разделите разные экраны модалки на отдельные компоненты. Это позволит упростить их управление и сделать код более читаемым.

3. Состояние: Вместо того чтобы использовать сложную систему контекстов, можно просто использовать локальное состояние (useState) или глобальное состояние (например, с помощью redux или mobx), в зависимости от ваших потребностей.

4. Хуки: Избегайте избыточного использования useMemo, useCallback и прочих, если нет явных причин для оптимизации. Часто избыточное использование этих хуков только усложняет код и на самом деле может замедлить приложение.

Псевдокод:

Основной компонент модалки:

function ModalComponent() {
    return (
        <Modal>
            <Switch>
                <Route path="/modal/presets" component={Presets} />
                <Route path="/modal/edit/:id" component={EditPhrase} />
                <Route path="/modal/create" component={CreatePhrase} />
                <Route path="/modal/delete/:id" component={DeletePhrase} />
                {/* ... */}
            </Switch>
        </Modal>
    );
}

Компонент пресетов:

function Presets() {
    const phrases = ... // получите фразы

    return (
        <div>
            {phrases.map(phrase => (
                <div key={phrase.id}>
                    {phrase.text}
                    <Link to={`/modal/edit/${phrase.id}`}>Редактировать</Link>
                </div>
            ))}
            <Link to="/modal/create">Создать новую фразу</Link>
        </div>
    );
}

Этот пример очень общий, но я надеюсь, что он даст вам представление о том, как можно структурировать ваш код. Если что-то кажется запутанным или избыточным, вероятно, так оно и есть