React component re-renders

Question

I'm learning react and I'm building this project that currently is very small but the Products component keep re-rendering.

As you can see I have a console.log(products); and in the console i see it printing 4 times.

How can I avoid this re-rendering?

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

Network tab only shows one call to fetch the data. So that's good.

APP.JS

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

PRODUCTS.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);

INDEX.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') );

I feel like I don't even need the React.memo. I added it to see if my issue goes away but it didn't — Patricio Vargas
– Patricio Vargas, Commented Apr 23, 2020 at 5:41
It's either a prop or state change, so if you get stuck make a useEffect hook which prints a console log when a prop value or state value changes and figure out what is changing and causing a re-render, once you figure that out it should be fairly obvious what is causing it — nanobar
– nanobar, Commented Apr 23, 2020 at 5:44
Cool I got the issue. Check this link please: stackoverflow.com/questions/60825649/… — Yash Joshi
– Yash Joshi, Commented Apr 23, 2020 at 6:00
@devpato Don't rely on the number of renders because react can call render phase method multiple times to detect side effects :) — Yash Joshi
– Yash Joshi, Commented Apr 23, 2020 at 6:03
Yeah, you can keep it as it is, it won't affect in production mode. This happens only in development mode. — Yash Joshi
– Yash Joshi, Commented Apr 23, 2020 at 6:10

Jagrati · Accepted Answer · 2020-04-23 06:08:38Z

1

Remove the <React.StrictMode> Comp. It should fix the issue.

Please check this issue. This answers your question here

edited Apr 23, 2020 at 6:08

answered Apr 23, 2020 at 5:49

Jagrati

12.3k9 gold badges37 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Patricio Vargas Over a year ago

I did that what you have in your code and it didn't work. I keep having the same issue :(

Jagrati Over a year ago

Pleae check the stackoverflow answer stackoverflow.com/questions/61328285/…

Patricio Vargas Over a year ago

that didn't work either. I removed disabled devtools from my project

Jagrati Over a year ago

Try removing the strict mode

Patricio Vargas Over a year ago

ahhhhh yeeessss that was the solution! wow very interesting. Now I see it printing twice. The first is an empty array [] (initial value) then array with data once the call is completed. That is normal behavior right?

|

Collectives™ on Stack Overflow

React component re-renders

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Linked

Related