CODEWITHSUNDEEP
javascriptreactjsreact-hooks
JAN
JAN

Reputation: 21885

Why React renders a component even though I don't pass anything to it?

Consider the code :

APP.JS

import React, { useState, useMemo } from 'react';
import Counter from './components/Counter';
import './App.css';

function App() {
  const [countA, setCountA] = useState(0);
  const incrementA = () => {
    setCountA(countA + 1);
  };


  // const memoCounter = useMemo(() => {
  //   return <Counter />;
  // }, []);
  
  return (
    <div className='App'>
      <h1>Incrementing CountA from APP.JS : {countA}</h1>
      <p>
        <button onClick={incrementA}>Increment A</button>
      </p>
      {/* {memoCounter} */}

      <Counter />
    </div>
  );
}

export default App;

Counter.js :

import React, { useEffect } from 'react';
let renderCount = 1;
const Counter = () => {
  useEffect(() => {
    renderCount++;
  });
  return (
    <div>
      <h1>Rendering Counter component : {renderCount}</h1>
    </div>
  );
};

export default Counter;

When the user hits the button and increments , React renders Counter component all over again , even though I don't pass anything to it.

However when I put useMemo it doesn't.

Why ?

Upvotes: 1

Views: 43

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53994

By default when a parent component renders (App), it renders all its children (Counter).

To overload the default behaviour, use React API like React.memo:

const Counter = () => {...}
export default React.memo(Counter);

Upvotes: 2

Related Questions