Home > Back-end >  Cannot find name 'componentDidUpdate' or what ever component on React with Typescript
Cannot find name 'componentDidUpdate' or what ever component on React with Typescript

Time:10-08

Can I use componentDidUpdate or what ever component with Typescript? My program does not find the function.

But for example UseEffect() works well.

CodePudding user response:

componentDidUpdate is only available on class components. For example:

class A extends React.Component {
    componentDidUpdate() {
        // works
    }
}

Hooks like useEffect are only available on functional components. For example:

function B() {
    useEffect(() => {
        // works
    })
}

You cannot use lifecycle methods on functional components, and you cannot use hooks on class components.

Typescript playground

CodePudding user response:

componentDidUpdate() is a lifecycle method used strictly in a Class based Component. The reason useEffect() is working for you is more than likely because you're using a Function Component. That's my best guess without actually seeing your code. Using TypeScript in tandem shouldn't have any effect on this.

If you're trying to perform changes in your component based on updated props (or state) using useEffect(), you can add a dependency as your second parameter;

useEffect(() => {
   ...act accordingly here...
}, [props.isActive])

The code above will check if the isActive prop supplied updated and if so, will run the code in the useEffect() hook. More on Effect Hooks here

Here's some material on the difference between the two

  • Related