React - Optimize Re-Renders with shouldComponentUpdate

JavaScript
1

Tell us what’s happening:

This code looks to me like it’s correct yet it’s not working. I get syntax error saying I’m missing a semicolon but I can’t figure out where.

Your code so far

class OnlyEvens extends React.Component {
  constructor(props) {
    super(props);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Should I update?');
    // Change code below this line
        if (nextProps.value % 2 === 0) {
      return true; // Päivitetään, jos arvo on parillinen
    }
    return false; // Ei päivitetä, jos arvo on pariton
  }
    // Change code above this line
  }
  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(state => ({
      value: 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/135.0.0.0 Safari/537.36 Edg/135.0.0.0

Challenge Information:

React - Optimize Re-Renders with shouldComponentUpdate

2

Check your curly brackets, you have an extra closing bracket.

3

Most of the console logs are not giving the entire answer you need to remove code as well. The comments tell you where to change the code but the error is coming up on line 15.

4

All they have to do is fix the syntax error. Then the code will pass.

5

Ok, that works but for some reason the error is not pointing to the correct line.

6

That is not really how syntax errors work. It is also complaining about a missing semicolon, but that isn’t the issue. Most of the time, syntax errors have a cascading effect that makes the parser fail to parse something later in the code.

Being able to balance brackets and fixing this type of error is something you absolutely have to learn and know how to do.

If you put your cursor after an opening bracket, the editor will highlight/show you the matching closing bracket.

1 Like
8

Or use this

removed by mod
9

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

10

Thank you! I didn’t realize there was an extra. It’s hard for me to see small errors like this but I’m slowly learning to fix them. Also depends on my ability to focus any given moment.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.