{this.props.value}

# React - Optimize Re-Renders with shouldComponentUpdate

**URL:** <https://forum.freecodecamp.org/t/react-optimize-re-renders-with-shouldcomponentupdate/745184>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [April 28, 2025, 6:50am UTC](https://forum.freecodecamp.org/t/react-optimize-re-renders-with-shouldcomponentupdate/745184 "2025-04-28T06:50:23Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![RexStorm](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rexstorm/32/373690_2.png) [@RexStorm](https://forum.freecodecamp.org/u/RexStorm)\
**Post date:** [April 28, 2025, 6:50am UTC](https://forum.freecodecamp.org/t/react-optimize-re-renders-with-shouldcomponentupdate/745184/1 "2025-04-28T06:50:23Z")

</div>

### 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

```jsx
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

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/front-end-development-libraries/react/optimize-re-renders-with-shouldcomponentupdate)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [April 28, 2025, 4:09pm UTC](https://forum.freecodecamp.org/t/react-optimize-re-renders-with-shouldcomponentupdate/745184/2 "2025-04-28T16:09:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![robheyays](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/robheyays/32/381866_2.png) [@robheyays](https://forum.freecodecamp.org/u/robheyays)\
**Post date:** [April 28, 2025, 4:49pm UTC](https://forum.freecodecamp.org/t/react-optimize-re-renders-with-shouldcomponentupdate/745184/3 "2025-04-28T16:49:10Z")

</div>

> [@RexStorm](#):
>
> ```auto
> if (nextProps.value % 2 === 0) {
> return true; // Päivitetään, jos arvo on parillinen
> }
> 
> ```

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.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [April 28, 2025, 7:48pm UTC](https://forum.freecodecamp.org/t/react-optimize-re-renders-with-shouldcomponentupdate/745184/4 "2025-04-28T19:48:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![robheyays](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/robheyays/32/381866_2.png) [@robheyays](https://forum.freecodecamp.org/u/robheyays)\
**Post date:** [April 28, 2025, 8:05pm UTC](https://forum.freecodecamp.org/t/react-optimize-re-renders-with-shouldcomponentupdate/745184/5 "2025-04-28T20:05:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [April 28, 2025, 8:40pm UTC](https://forum.freecodecamp.org/t/react-optimize-re-renders-with-shouldcomponentupdate/745184/6 "2025-04-28T20:40:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JAM3S11](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jam3s11/32/391184_2.png) [@JAM3S11](https://forum.freecodecamp.org/u/JAM3S11)\
**Post date:** [May 2, 2025, 9:34pm UTC](https://forum.freecodecamp.org/t/react-optimize-re-renders-with-shouldcomponentupdate/745184/8 "2025-05-02T21:34:37Z")

</div>

Or use this

```auto
removed by mod

```

---

<div class="post-metadata">

**Author:** ![pkdvalis](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pkdvalis/32/350571_2.png) [@pkdvalis](https://forum.freecodecamp.org/u/pkdvalis)\
**Post date:** [May 3, 2025, 1:13am UTC](https://forum.freecodecamp.org/t/react-optimize-re-renders-with-shouldcomponentupdate/745184/9 "2025-05-03T01:13:46Z")

</div>

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](https://www.freecodecamp.org/news/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.

---

<div class="post-metadata">

**Author:** ![RexStorm](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rexstorm/32/373690_2.png) [@RexStorm](https://forum.freecodecamp.org/u/RexStorm)\
**Post date:** [May 5, 2025, 6:48am UTC](https://forum.freecodecamp.org/t/react-optimize-re-renders-with-shouldcomponentupdate/745184/10 "2025-05-05T06:48:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [November 3, 2025, 6:48pm UTC](https://forum.freecodecamp.org/t/react-optimize-re-renders-with-shouldcomponentupdate/745184/11 "2025-11-03T18:48:51Z")

</div>

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