How to know if props have changed when using React.memo() with a functional Component

user_1705922 0
Viewed 1699

I need to make an equivalent for the obsolete shouldComponentUpdate react lifecycle method with react hooks.

I have a Functional Components as it's called in this article which uses React.memo() to do it.

I just couldn't understand how to prevent the re-rendring of the component if only props is returned as a unique argument.

In others React.memo() examples (as in here) there is also a nextProps which is returned besides props and which is useful to compare with props to decide wether to let re-render the component or not.

Even when i add a second argument to be returned by the component , i always got just an empty plain js object.

Such as Functional Components aren't they always stateless so they won't keep any of the component's variables's values even those instanciated with the React.useState() ? So how we are supposed to know if props have changed ?!

this is the component:

import React, { useEffect, useRef, useState, memo } from "react";

const TinyEditor = (props, nextProps) => {
   return 'some jsx'
};

const MemoizedTinyEditor = memo(
  TinyEditor,
  (props, nextProps) => {
    // if(props.prop1 === nextProps.prop1) {
    //   // return true if you don't need re-render
    // }
    console.log("TinyEditor :: MEMO!!!!!!!!!!");
    return true;
  }
);
export default MemoizedTinyEditor;
react-hooks reactjs
1 Answers

Have you tried what's mentioned in react's docs ?

By default it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument.

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

React.memo

If you have tried this.. you should add attempted code to your question for others to review and figure out the issue. FYI this only works for props.. if the state of a component changes.. it will always rerender

user_29554280
Related