How to prevent Re-render in react when the state is changed using Functional Component

Question

I'm using functional components and React-Redux to manage state. Simply speaking, I hope that even if the state changes, rendering will not happen. First of all, the code is as follows. It is a simple code for explanation.

const NOUPDATE = ({ uploadAnswer, noState }) => (
  <>
    <div className="content">
      <div className="container">
        <p className="directions" />
        <ul className="qbox">{noState ? (<p>true</p>) : (<p>false</p>)}</ul>
        <button onClick={uploadAnswer}>upload</button>
      </div>
    </div>
  </>
);
const mapStateToProps = state => ({
  noState: state.problemInfoReducer.checkMode,
});
const mapDispatchToProps = dispatch => ({
  uploadAnswer: value => dispatch(uploadAnswer(value)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(NOUPDATE);

uploadAnswer reverses noState each time it is dispatched. So if I dispatch uploadAnswer every time, noState is updated, and the screen is re-rendered as a whole. I don't want the screen to be re-rendered even if noState is updated.

Nick · Accepted Answer · 2019-08-13 02:30:52Z

1

Here is a solution that allows you to keep the qbox boolean toggle without rendering the parent component. Essesntially, you use Redux to your advantage by creating a child component that's mapped to the noState property rather than having that mapping in the parent component.

NOUPDATE.jsx

import Qbox from "./Qbox";

const NOUPDATE = ({ uploadAnswer }) => (
  <>
    <div className="content">
      <div className="container">
        <p className="directions" />
        <Qbox />
        <button onClick={uploadAnswer}>upload</button>
      </div>
    </div>
  </>
);

const mapDispatchToProps = dispatch => ({
  uploadAnswer: value => dispatch(uploadAnswer(value)),
});

export default connect(
  null,
  mapDispatchToProps,
)(NOUPDATE);

Qbox.jsx

const Qbox = ({noState}) => <ul className="qbox">{noState ? (<p>true</p>) : (<p>false</p>)}</ul>;

const mapStateToProps = state => ({
  noState: state.problemInfoReducer.checkMode,
});

export default connect(
  mapStateToProps
)(Qbox);

answered Aug 13, 2019 at 2:30

Nick

16.7k3 gold badges21 silver badges38 bronze badges

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

2 Comments

Jay Over a year ago

IT WORKS NICK! THANK YOU!

Nick Over a year ago

Hooray, glad I could help!

Nick · Accepted Answer · 2019-08-13 01:42:57Z

0

You can use React.memo to memoize your component. The second argument passed to React.memo is a function that takes oldProps and newProps. Return false when the component should be updated.

Below, I return false only when the uploadAnswer doesn't match between oldProps and newProps, so that's the only time the component will re-render.

const NOUPDATE = React.memo(
  ({ uploadAnswer, noState }) => (
    <>
      <div className="content">
        <div className="container">
          <p className="directions" />
          <ul className="qbox">{noState ? <p>true</p> : <p>false</p>}</ul>
          <button onClick={uploadAnswer}>upload</button>
        </div>
      </div>
    </>
  ),
  (oldProps, newProps) => {
    if (oldProps.uploadAnswer !== newProps.uploadAnswer) {
      return false;
    }

    return true;
  }
);

answered Aug 13, 2019 at 1:42

Nick

16.7k3 gold badges21 silver badges38 bronze badges

5 Comments

Jay Over a year ago

thank you for your help! but I got additional question. As you can see, my 'qbox' class's p tag is not working. I only want to change p tag, true or false. Is it possible?

Nick Over a year ago

Hmm, I don't quite follow; what do you mean it's not working?

Jay Over a year ago

Well, I'd like to ask you in advance that I think it might be a pretty strange question. In my qbox, the contents of the p tag are either true or false according to noState. It's like a toggle button. But, of course, it doesn't work like a toggle button because it doesn't re-render.

Nick Over a year ago

Yes, that's going to be problematic! You can't have it both ways. What you can do is create a separate element that only takes noState and map that to props using Redux. You can then remove the noState prop dependency within this component.

Nick Over a year ago

I'm adding a new answer that should hopefully do what you're looking for

Collectives™ on Stack Overflow

How to prevent Re-render in react when the state is changed using Functional Component

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related