score:1

Accepted answer

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

score: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;
  }
);

Related Query

More Query from same tag