Как лучше работать с событием scroll в React?

Павел Диденко, ну смотрите. В компоненте по-умолчанию нет никакой проверки соответствия состояния и вызов setState инициирует его перерисовку. Для того чтобы ее предотвратить достаточно использовать PureComponent или реализовать метод shouldComponentUpdate. Но это не самый верный путь, по-хорошему, вам надо менять алгоритм. Вызовы setState должны происходить только тогда, когда в этом есть необходимость.

Как создать структуру фалов с нужным содержанием при запуске npm i?

BD_ l3ftoverZ!, насколько я понял, автор хочет свой boilerplate с базовой структурой, но не знает как это словами описать.

Как лучше работать с событием scroll в React?

Павел Диденко, какой смысл выкладывать в песочницу нерабочий код?
Вы писали:

componentDidUpdate отрабатывает при каждом скролле

а это значит, что у вас не аналогично и состояние изменяется каждое событие. По-хорошему, так быть не должно.

Как лучше работать с событием scroll в React?

Павел Диденко, я не видел ваш код) В примере в комментарии к ответу совсем простой кейс, где вообще нет смысла слушать скролл.

Реализацию того, как мне нужно сделать можно посмотреть тут https://skybuy.ru/catalog/smesiteli/ если зайти в категорию, где сайдбар меньше в высоту, чем товары, то там поведение сайдбара меняется

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

Как лучше работать с событием scroll в React?

Павел Диденко,

подскажи, как сделать так, чтобы он не вызывался?

Использовать фиксированное позиционирование. В данном случае, по сути и не нужно слушать скролл.

И Реакт же должен смотреть DOM дерево по ключам, если произошли изменения, то перерисовывать, но у меня данные не поменялись, поменялись только координаты блока обертки, почему он тогда перерисовывает вообще все?

Рендер не означает полное обновление реального DOM и не означает render всех вложенных компонентов. В DOM обновляется только обертка, но чтобы ее обновить, библиотеке надо выполнить render, сравнить две версии Virtual DOM нод и сделать необходимые обновления.

Еще для частых обновлений вроде обновления top лучше использовать атрибут style, так как Styled Compоnents для каждого значения генерирует класс.

По вашей задаче, если, допустим, у вас есть Header, который имеет два состояния, то по событию скролл его обновление должно происходить только в тот, момент когда это нужно, а не каждый вызов. То есть при скролле вниз это будет всего одно обновление. Как-то так по-хорошему должно быть. Для этого надо использовать условные операторы.

React | Как показывать заглушку пока загружается iframe?

Mikhail Osher, ну мне iframe всего один раз приходилось использовать. Как раз была похожая задача, надо было встроить в приложение сгенерированную статичную документацию по публичному API. Я ее загружал AJAX запросом и по загрузке добавлял свойством srcDoc, убирал прелоадер и снимал с iframe нулевой opacity.
Все работало без нареканий. Правда пришлось поломать голову как роутинг закостылить.

Петр Мухуров, да, все верно. Поправил. Спасибо!

Как бы выглядел этот код без хуков (hooks) и с компонентами класса, а не с функциональными компонентами?

Петр Мухуров, еще обновление состояния в колбеке таймера. В оригинале в состояние пишется остаток от деления суммы active + 1 + length на length:
setActive((active + 1 + length) % length)
Это не дает значению выйти за диапазон индексов массива, а сбрасывает активный элемент в 0 после достижения последнего элемента.

Как бы выглядел этот код без хуков (hooks) и с компонентами класса, а не с функциональными компонентами?

1. Таймаут обязательно надо чистить в componentWillUnmount.
2. В componentDidMount тоже надо инициировать таймер.
3. componentDidUpdate у вас написан неправильно. Пытаетесь получить состояние из props. Состояние обновляете неправильно. Внимательно посмотрите исходный вариант.
4. Опечатка в next.

Как правильно изменять store в redux?

Юра Комаров,

Состояния сбрасываются потому что ADD_MOSQUITO приходит во все reducers , a так как в каждом есть default return state то и на выходе остается только то что попало под case ADD_MOSQUITO , остальные переписываются в дефолтные

Повторюсь. Ничего не сбрасывается.
Действие и должно проходить по всем редьюсерам. В редьюсерах, в которых оно не обрабатывается возвращается не измененное состояние(не начальное).
Ищите ошибку там, где зачем-то создаете несколько копий хранилищ. Больше без остального кода тут не скажешь.

Полностью ли nodejs асинхронен?

IDONTSUDO, а судя по вопросу, посмотрели подкаст, но толком ничего не поняли.

Полностью ли nodejs асинхронен?

Изучайте JavaScript.

Как сделать чтобы запускалась функция не сразу а через несколько секунд?

Andriy Kosmenyuk, ТС изменил текст и теги вопроса. До этого тут было развернутое задание по React. Тот вопрос он перепубликовал вопрос в упрощенном виде, видимо, чтобы повысить шансы получить ответ. Текст нового вопроса указывает на то, что пара вещей, которые были написаны, в этом были ложью. Более того, судя по почерку попрошайничества, у этого пользователя, возможно, есть еще несколько аккаунтов.
Как по мне банить таких надо.

Как решить проблему с загрузкой изображений большого размера при взаимодействии с API?

А, что мешает посылать ссылки на изображения, а не сами изображения?

Как вызвать метод если статус в state false?

Плохой подход. Опишите задачу, скорей всего, все можно спроектировать иначе.

Как объединить react и express при разработке fullstack?

Вариантов множество. К React и Express ваш вопрос прямого отношения не имеет. Как вариант, поближе познакомиться с сервером Nginx, его возможностями и типовыми кейсами. Не вздумайте раздавать статику в роде с помощью Express.

Как исправить ошибку в своей реализации redux?

1. Неизвестно, зачем вам понадобилась своя реализация Redux + React Redux.
2. Неизвестно, что вам мешает посмотреть исходный код обоих библиотек.

Сессионные cookie?

photosho, да.

Как сделать чтобы запускалась функция не сразу а через несколько секунд?

Вас ни капли не смущает, что это задание, а не вопрос?

Сессионные cookie?

photosho, да, Expires вы не ставите. Значит браузер делает session restore. Это надо, чтобы восстановить все вкладки после закрытия.

Можно ли совместить обычные функции c ES6 классом в React?

antonstolar,

я уже почти весь learn.javascript.ru изучил

Сомневаюсь. Пробежаться глазами и прорешать до полного понимания это разные вещи. В среднем, человеку для усваивания темы надо выполнить 14 разных примеров. Кому-то больше, кому-то меньше, тут все от способностей зависит.

По первому вопросу - нет на learn.javascript.ru такого варианта создания функции. Может вы когда-то давно с другого ресурса именно этот момент изучили, а я не видел там такого.

Методы объекта.

На второй вопрос я тем более не найду там ответ потому что вопрос больше по правильности написания кода, коректности его работы.Тоесть можно ли так совмещать код из разних спецификаций или нет.

Эта информация есть в любой книге и на любом ресурсе по изучению JavaScript. ЕS6 полностью поддерживает ES5.

1. Можно в React написать функцию вот так:

Нет никакого "в React". Чтобы это отчетливо понимать надо знать JavaScript.
Все, что можно делать в JavaScript, можно делать и в React. React написан на JavaScript и выполняется интерпретатором JavaScript, как любой другой JavaScirpt код. Когда вы описываете React компоненты вы используете JavaScript. А JSX всего лишь синтаксический сахар над вызовом React.createElement.
Именно поэтому в коде, где используется JSX надо обязательно делать импорт React:

import React from 'react';

const Foo = () => <div>Bar</div>;

А так выглядит этот код без сахара:

import React from 'react';

const Foo = () => React.createElement('div', null, 'Bar');

2. Можно вот так?
или вот так:

Класс: базовый синтаксис