Error-Optimize Re-Renders with shouldComponentUpdate

Error-Optimize Re-Renders with shouldComponentUpdate
0.0 0

#1

Tell us what’s happening:
There is an error in console :TypeError: e.onNext is not a function
What is that? maybe that’s why button disappears when clicking on it. There is the same problem on the previous challenges too.

Your code so far


class OnlyEvens extends React.Component {
  constructor(props) {
    super(props);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Should I update?', this.props, nextProps);
     // change code below this line
 
    return true;
     // change code above this line
  }
  componentWillReceiveProps(nextProps) {
    console.log('Receiving new props...');
  }
  componentDidUpdate() {
    console.log('Component re-rendered.');
  }
  render() {
    return <h1>{this.props.value}</h1>
  }
};

class Controller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
    this.addValue = this.addValue.bind(this);
  }
  addValue() {
    this.setState({
      value: this.state.value + 1
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.addValue}>Add</button>
        <OnlyEvens value={this.state.value}/>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate


#2

I am not sure what the error log means but this might help.

You will need something like an if/else statement to check nextProps.value is even or not, then return true or false.


#3

You are trying to access the previous state, so that you can update the current state.

But this.state is not available inside this.setState, because setState is an asynchronous call. Which just means you can’t trust it to update when you tell it. Instead, it will update as soon as possible

You have to pass a callback to get access to the state. The callback will receive 2 arguments, previous state, and current props

addValue() {
    this.setState((prevState, props) => {
      return { value: prevState.value + 1 }
    });

#4

Actually i know about if else and i pass the challange even using this.state.value inside setState. Its interesting to know that using this.state in setState is not a good practice. but the problem is that error exists even before i edit the code and html part disapears when clicking on it before editing, after editing and even after passing the challenge.


#5

I am also facing the same issue, did you find any solution to this? On click of Add button, i get console error “TypeError: e.onNext is not a function” and nothing is rendered on screen. I have tried above solutions but does not seem to work.


#6

@shrutigrover

I looked at the stack trace and it looks like FCC hijacks console.log statements. Comment out your console statements in your lifecycle methods and the error will go away.


#7

Hi @JM-Mendez,

You are right , it was because of console statements. Thanks for your help.


#8

Thanks JM-Mendez2d. That worked. but what is FCC hijacks ?


#9

@KLFar FCC hijacks =>Probably there is hook set up by FreeCodeCamp website for console.log statements and it’s not handling the return gracefully.

@JM-Mendez, Thanks a lot for helping on this.


#10

@bhagwandas is correct about what I meant. I’d just like to point out that your original code works now. So they either fixed it, or it was a temporary bug.