Just need a small solution for not rendering a component in react app

25 Views Asked by At

i have used memo to not rerender the RenderButtons component but is there any way in react to fully stop rerender and like avoid the extra computational computation for memo and entirely avoid use of memo or useMemo or it is the very nature if recoil library ?

import { memo } from 'react';
import { RecoilRoot, atom, useRecoilState, useRecoilValue } from 'recoil';

const countAtom = atom({
  key: 'countState',
  default: 0,
});

function App() {
  return (
    <RecoilRoot>
      <div>
        <RenderCount />
        <RenderButtons />
      </div>
    </RecoilRoot>
  );
}

function RenderCount() {
  const count = useRecoilValue(countAtom);
  return <h1>{count}</h1>;
}

const RenderButtons = memo(() => {
  const [count, setCount] = useRecoilState(countAtom);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Add + 1</button>
      <button onClick={() => setCount(count - 1)}>Subtract - 1</button>
    </div>
  );
});

export default App;

0

There are 0 best solutions below