Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Property 'shouldComponentUpdate' is not assignable to the same property

I got an error in TypeScript using shouldComponentUpdate:

Property 'shouldComponentUpdate' in type 'Hello' is not assignable to the same property in base type Component<IProps, any, any>.

in Component:

import React, { Component } from 'react'

class Hello extends Component<IProps, any> {
  shouldComponentUpdate(nextProps: IProps) { // error here
    console.log(nextProps, 'nextProps')
  }

  ....// some code
}

Can someone explain me what I'm doing wrong?

like image 615
Max Travis Avatar asked Dec 05 '18 13:12

Max Travis


People also ask

What is the point of shouldComponentUpdate () method?

What does “shouldComponentUpdate” do and why is it important ? The shouldComponentUpdate is a lifecycle method in React. This method makes the component to re-render only when there is a change in state or props of a component and that change will affect the output.

Should I use shouldComponentUpdate?

ReactJS shouldComponentUpdate() Method It only updates the component if the props passed to it changes. The shouldComponentUpdate method is majorly used for optimizing the performance and to increase the responsiveness of the website but do not rely on it to prevent rendering as it may lead to bugs.

What is nextState in shouldComponentUpdate?

nextState is for detecting if the component should update based on the upcoming state just like you mentioned. This helps to optimize updating components.

When componentDidUpdate is called?

The componentDidUpdate event is triggered whenever there is a state or props update. ComponentDidUpdate() has access to three properties, two of which are most often used more than the third. These are prevProps, prevState and lastly, snapshot, which is used less often.


1 Answers

There is a little bit annoying to use React with TypeScript, because the last one today is does not contains all required error describing tips. So, probably an error in your case is binded with non-finished return call from shouldComponentUpdate method.

Try next and see what will happen:

  shouldComponentUpdate(nextProps: IProps) { // error here
    console.log(nextProps, 'nextProps')
    return true
  }
like image 79
Sviat Kuzhelev Avatar answered Sep 28 '22 18:09

Sviat Kuzhelev