How to stop rendering component while state update? [duplicate]

Question

I am new to this community and react development and currently developing a app for learning react. I have found that my current implementation causes re renders in every state update. How to fix this issue?


import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

  const handleReset = () => {
    setCount(0);
  };

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
};

export default Counter;

Searched solution on web

On every setCount, your app will re-render. This is the normal behavior. — devpolo
– devpolo, Commented Apr 6, 2023 at 10:18
If it didn't re-render, you wouldn't see the number change on the page. Are you sure that's what you want? — DBS
– DBS, Commented Apr 6, 2023 at 10:20
setState is suppose to re-render the component, that's the expected behaviour as seen legacy.reactjs.org/docs/state-and-lifecycle.html — Luís Mestre
– Luís Mestre, Commented Apr 6, 2023 at 10:33

Manuel Njiakim · Accepted Answer · 2023-04-06 11:14:33Z

Normally react should render the component every time the state is updated, but you can decide when to render something using useMemo.

import React, { useMemo, useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  
  //This part will be memorized
  const StaticBlock = useMemo(() => {
    const handleIncrement = () => {
      setCount(prevCount => prevCount + 1);
    };

    const handleDecrement = () => {
      setCount(prevCount => prevCount - 1);
    };

    const handleReset = () => {
      setCount(0);
    };
    
    return (
        <>
            <button onClick={handleIncrement}>Increment</button>
            <button onClick={handleDecrement}>Decrement</button>
            <button onClick={handleReset}>Reset</button>
        </>
    )
  }, [])

  return (
    <div>
      <h1>Counter: {count}</h1>
      {StaticBlock}
    </div>
  );
};

export default Counter;

Alexxino · Accepted Answer · 2023-04-06 10:40:18Z

0

The default behavior would be the one you just described. In most cases, when state updates, the component should re-render to see the update.

If you want to re-render a complex component only when the props change, you can use memo, like this:

import { memo } from 'react'

const Component = (props) => {
    // component logic
};

export default memo(Component);

In your case, your component should update when the state changes, because I assume you want to show the count in the h1 when it increases.

answered Apr 6, 2023 at 10:40

Alexxino

9181 gold badge4 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to stop rendering component while state update? [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related