Реактивный компонент повторно отображает

Question

Я учусь реагировать, и я строю этот проект, который в настоящее время очень мал, но компонент Products продолжает повторную визуализацию.

Как вы можете видеть, у меня есть console.log(products); и в консоли я увидеть, как он печатается 4 раза.

Как можно избежать повторного рендеринга?

1. []
2. []
3. [...data here]
4. [...data here]

На вкладке Сеть отображается только один вызов для извлечения данных. Так что это хорошо.

APP. JS

const app = () => {
  return (
    <div className="App">
      <Products />
    </div>
  );
}

ПРОДУКТЫ. JS

const Products = props => {

    const products = useSelector(state => state.products);
    const dispatch = useDispatch();
    const onLoadProducts = useCallback(() => dispatch(actionCreators.onLoadProducts()), [dispatch]);


    useEffect(() => {
        onLoadProducts();
    }, [onLoadProducts]);

    const flag = products.length > 0 ? 'YAY' : 'NAY';
    console.log(products);
    return (
        <p>{flag}</p>
    )
}

export default React.memo(Products);

ИНДЕКС. JS

const composeEnhancers = process.env.NODE_ENV === 'development' ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : null || compose;

const store = createStore(productsReducer, composeEnhancers(
  applyMiddleware(thunk)
));

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}><App /></Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

Удалить <React.StrictMode> Комп. Это должно исправить проблему.

Пожалуйста, проверьте эту проблему. Это отвечает на ваш вопрос здесь