React Hooks – How do I implement shouldComponentUpdate?

by

In a comment above Gabriele Petrioli links to the React.memo documentation that explains how to implement shouldComponentUpdate. I was googling combinations of shouldComponentUpdate + useEffect + “react hooks”, and this came up as the result. So after solving my problem with the linked documentation I thought I would bring the information here as well.

This is the old way of implementing shouldComponentUpdate:

class MyComponent extends React.Component{
  shouldComponentUpdate(nextProps){
    return nextProps.value !== this.props.value;
  }
  render(){
    return (
     <div>{"My Component " + this.props.value}</div>
    );  
 }
}

The New React Hooks way:

React.memo(function MyComponent (props) {

  return <div>{ "My Component " + props.value }</div>;

})

I know you were probably asking for more in your question, but for anyone coming from Google looking for how to implement shouldComponentUpdate using React Hooks, there you go.

The documentation is here:
how-do-i-implement-shouldcomponentupdate

More Related Contents:

  1. How to fix missing dependency warning when using useEffect React Hook
  2. Infinite loop in useEffect
  3. How to use `setState` callback on react hooks
  4. React-hooks. Can’t perform a React state update on an unmounted component
  5. How to use callback with useState hook in react [duplicate]
  6. In useEffect, what’s the difference between providing no dependency array and an empty one?
  7. React useState cause double rendering
  8. How to use throttle or debounce with React Hook?
  9. React useReducer async data fetch
  10. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  11. In general is it better to use one or many useEffect hooks in a single component? [closed]
  12. React hooks useEffect only on update?
  13. useNavigate() may be used only in the context of a component
  14. Testing React components that fetches data using Hooks
  15. Why React useState with functional update form is needed?
  16. React.useState does not reload state from props
  17. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  18. How do react hooks determine the component that they are for?
  19. React Hooks: how to wait for the data to be fetched before rendering
  20. useReducer Action dispatched twice
  21. Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’
  22. is it possible to React.useState(() => {}) in React?
  23. React hook rendering an extra time
  24. Field Array in React using formik
  25. What is the expected return of `useEffect` used for?
  26. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  27. Passing array to useEffect dependency list
  28. Which react hook to use with firestore onsnapshot?
  29. How do I window removeEventListener using React useEffect
  30. React Hook useEffect has a missing dependency: ‘list’

Leave a Comment