Mikhail Osher

Если попробовать поразмышлять..

useState подразумевает плюс-минус простой стейт, который удобно обновлять через либо setState(newValue), либо через setState(prevState => ({ ...prevState, key: newValue })).

useReducer для более сложных кейсов, где хранить логику обновления в компоненте становится нецелесообразным и/или будет слишком раздуваться компонент. Или же где логика переиспользуется. Впрочем, то же самое можно сделать и через useState, создав свои хуки, которые под капотом юзают useState/useReducer.

На выходе, самым логичным на ум приходит более плавная миграция в redux на useReducer.

Проблема в том, что redux не нужен в 90%+ проектах, и его можно было заменить голым реактом с его инструментами.

Задайте кастомный IMAGE_INLINE_SIZE_LIMIT через переменные окружения.

https://create-react-app.dev/docs/advanced-configu...

Если нужно конкретно для определеной папки, то найдите следующий блок, скопируйте его, и в верхнем укажите регулярку, которая удовлетворит папку с emoji.

// "url" loader works like "file" loader except that it embeds assets
            // smaller than specified limit in bytes as data URLs to avoid requests.
            // A missing `test` is equivalent to a match.
            {
              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
              type: 'asset',
              parser: {
                dataUrlCondition: {
                  maxSize: imageInlineSizeLimit,
                },
              },
            },

interface TodoItem {
    id: number
    subtitle: string
    important: boolean
    done: boolean
}

const generalToggle = (arr: TodoItem[], id: number, propertyName: keyof TodoItem) => {
        const idx = arr.findIndex((item) => item.id === id);
        const oldItem = arr[idx];
        const value = !oldItem[propertyName];

        const item = {...arr[idx], [propertyName]: value};
        return [
            ...arr.slice(0, idx),
            item,
            ...arr.slice(idx + 1)
        ];
    };

А еще лучше, храните TODO объектом по ключам (для мутаций) и отдельно список IDs (для рендера списка), чтобы O(n) не гонять на каждое изменение.

function dataPage() {
  fetch('example.com')
    .then(response => response.json())
    .then(data => {
      const promises = data.URLs.map(url => fetch(url).then(r => r.json()))

      return Promise.all(promises).then((arr) => {
        data.arr = arr;
        return data;
      })
    })
    .then((data) => {
      setState(prevState => {
        return (
          {
            ...prevState,
            data // вероятно тут спред нужен по логике
          }
        )
      })
    })
}

https://www.npmjs.com/package/react-error-overlay
Эта утилита входит в состав create-react-app, вполне приятно ошибки показывает.
Нужно будет настраивать ручками, либо попробуйте пересесть на create-react-app - там из коробки вагон всего есть.

css={`класс`} выглядит, как emotion css prop.
Это не является ничем связанным с React. Это лишь фича библиотеки, для которой требуется специальная настройка.
Сам по себе `css=xxx` не работает в чистом React.

Гуглите в сторону "react mangle class names".

Добавьте return statement перед вызовом axios.

someAwesomeFunction= (arg1) => {
        let data = JSON.stringify({
            "arg1": arg1,
        })
        // Send a POST request
        return axios({
            method: 'post',
            url: awesomeUrl,
            data: data,
            headers: {
                "Content-Type": "application/json"
            }
        }).then((response) => {
            console.log(response.status)       ##вот здесь печатает статус код
            return (response.status)
        })
            .catch((error) => {
                console.log(error)
                return 500
            })}

Затем дождитесь асинхронную операцию

// вариант 1
handleClick = async () => {
        let response = await this.props.someAwesomeFunction(this.props.arg)
        console.log(response)           ######вот здесь получаю undefined
    }

// вариант 2
handleClick = () => {
        this.props.someAwesomeFunction(this.props.arg).then(response => {
             console.log(response);
        });
    }

А вообще, советую внимательно прочитать и понять https://learn.javascript.ru/async

Внутри Switch срабатывает первый найденный роут. Поставьте NotFound последним.

https://reactrouter.com/web/api/Switch