lnked

Если прямо вот так сидят и не хотят переходить - то вводить более строгие правила по обновлению/добавлению библиотек и ноды.

что я бы сделал:
1. составить список проблем.
2. понять какие действия приводят к этим проблемам. Например обновление библиотек/добавление новых
3. написать как можно проверить что эти действия в каждый конкретный момент не сломали все. Например "если вы обновили библиотеку, то надо проверить что все нормально и в винде и на линуксе"
4. подумать как эти проверки сделать удобно. Может быть прикрутить в CI сборку под обе платформы на каждый коммит где затронули package.json, или обновлять либы только в отдельной ветке и просить проверить на другой платформе, и после этого только мержить.

Сделайте одну версию которая работает везде без конфликтов, зафиксируйте, и с этой точки вам надо установить правила, что делать чтобы проблемы снова не появлялись и донести до всех что они нужны.

В идеале конечно если проверка на то что все собирается под обеими платформами будет автоматическая после каждого коммита.

<Placemark
  options={{
    iconLayout: 'default#image',
    iconImageHref: 'здесь путь к вашей картинке',
  }}
/>

https://codesandbox.io/s/polished-rgb-m430d?file=/...

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

const App = () => {
  const [showComponent, changeShowComponent] = useState(0)
  return <div>
    <button onClick={() => changeShowComponent(1)}>Начинаем</button>
    {showComponent === 1 && <FirstModalComponent changeShowComponent />}
    {showComponent === 2 && <SecondModalComponent changeShowComponent />}
  </div>
}

Соответственно внутри первого модального компонента в нужный момент вызываете переданную в него функцию changeShowComponent(2)и все перерисуется, первый компонент исчезнет, второй появится

Артур Галяев, у вас значение date не меняется, т.к. объект moment мутабельный и при манипуляциях с датой не меняет ссылку на исходный объект, date.add(1, 'month') это тот же самый объект момент. Если вам нужно в стейте хранить именно весь объект moment либо добавьте .clone() в конце, чтобы клонировать объект момент:
date.add(1, 'month').clone()
либо вместо moment используйте иммутабельную библиотеку для работы с датами, например, dayjs
Я, в принципе, не советую moment использовать, когда есть более легковесные аналоги (moment - 70.4
kB, dayjs - 2.8kB)

data.map(({ city, street, house, floor, ...n }) => (
  n.address = `${city}, ${street}, ${house}/${floor}`,
  n
))

function App() {
  const [ items, setItems ] = useState([]);

  const onItemClick = ({ target: { dataset: { id } } }) =>
    setItems(items.filter(n => n !== +id));

  const onAddNewClick = () =>
    setItems([ ...items, 1 + Math.max(0, ...items) ]);

  return (
    <div>
      {items.map(n => <button onClick={onItemClick} data-id={n}>#{n}</button>)}
      <button onClick={onAddNewClick}>add</button>
    </div>
  );
}

Ну прилетит другой текст с админки или от пользователя в верстку, и все старания впустую.

Используй этот подход вместо Pixel perfect
https://designpub.ru/%D0%BE%D1%82%D1%81%D1%82%D1%8...

Верстка это не плакат, и мыслить нужно не пикселями, а другими абстракциями. Система отступов, сетка, компоненты и тд. Дизайнер должен быть машиной, чтобы все это предусмотреть. И руки у него не должны трестись.

PP хорошо для обучения, на реальных проектах договаривайся о точности +- 30 px.

Что касается типографики, переноси по параметрам. Figma, avacode выдают готовый css для типографики, его в 99% достаточно.

Вэб-дизайнер должен понимать как типографика работает в вэбе. Есди он что-то там нашаманил левого в своём фотошопе - это его косяк, пусть переделывает. Вот и всё, собственно.
Это если разница велика. Если разница полупиксельная - то это нормально, шрифты по разному рендерятся как в разных браузерах, так и в разных OS.

Ваш код работает
Ошибка в чём-то другом. Попробуйте открыть ваше приложение в режиме инкогнито или обновите react-router-dom.

Ререндер происходит всего 2 раза.

You may call setState() immediately in componentDidMount(). It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state.

Читайте документацию внимательней.

Сделайте функцию-хэлпер или декоратор на компоненты, где будет вызов fetch и другие повторяющиеся куски.

я же не могу писать для каждого запроса

Почему не можете? Просто следуйте принципам DRY - увидели что везде пишите одно и тоже - выносите в модули/итераторы/etc

Нужно и то, и то, в зависимости от ситуации. Львиная доля проектов не нуждается в redux, его просто так туда добавляют.

Если вы хотите запустить эффект только один раз (при монтировании), вы можете передать пустой массив [] в качестве второго аргумента.

let [weatherData, setWeatherData] = useState({})

    let fetchWeatherData = async() => {
        let url = `https://api.openweathermap.org/data/2.5/forecast?q=Chicago&APPID=${process.env.APIKey}&cnt=5`
        let response = await fetch(url);
        let data = await response.json()
        await setWeatherData(data)
    }

    useEffect(()=>{
        fetchWeatherData()
    }, [])

Документация