React.memo and withRouter

Asked
Active3 hr before
Viewed126 times

12 Answers

reactwithrouter
90%

Now: to access the pathname correctly in the function passed to memo then memo should be wrapped with withRouter and not the opposite, withRouter wrap a component (it doesn't know it's memorized version of a component or not, it just wraps it) and pass it the routing props.,The function passed to memo as a second argument now can access the previous and new props and do the comparison as we talked earlier (where each props as inside it the fully routing details that you want).,I want to not re-render my component on certain paths, trying to do this using React.memo and checking the current path using the withRouter HOC.

just use it like this

function compare(prevProps, nextProps) {
   console.log(prevProps, nextProps)
   return (prevProps.location.pathname == nextProps.location.pathname)
}
export default withRouter(React.memo(MyComponent, compare));

So the comparison should be something like

prevProps.location.pathname == nextProps.location.pathname
load more v
88%

Without memo:

connect(
   mapStateToProps,
   mapDispatchToProps
)(Button);

With memo:

connect(
   mapStateToProps,
   mapDispatchToProps
)(React.memo(Button));

And even wrap to connect: (This should be the solution with connect)

React.memo(
   connect(
      mapStateToProps,
      mapDispatchToProps
   )(Button)
);
load more v
72%

As long as title and releaseDate props are the same, React skips rendering MemoizedMovie. This improves the performance of MovieViewsRealtime component.,The best case of wrapping a component in React.memo() is when you expect the functional component to render often and usually with the same props.,You gain a performance boost: by reusing the memoized content, React skips rendering the component and doesn’t perform a virtual DOM difference check.

export function Movie({ title, releaseDate }) {
  return (
    <div>
      <div>Movie title: {title}</div>
      <div>Release date: {releaseDate}</div>
    </div>
  );
}

export const MemoizedMovie = React.memo(Movie);
load more v
65%

const Component=memo(()=>{,export default withRouter(Component),I am getting undefined withRouter when I am using ReactDevTools to inspect the tree ,is this a bug or should I do something different ?

How can I use memo and withRouter together without getting ?

/n

const Component=memo(()=>{

const Component = memo(() => {
load more v
75%

I guess most of you have heard about the memo higher order component. You wrap your Component in it, it triggers render only when the component’s props change, all is nice and dandy.,I also created a higher order component for this, which I’ll show/link at the end of the article.,As you can see, the <Admin /> component isn’t re-rendering in vain and neither is the <Header /> .

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);
load more v
40%

 Pretag team - issue, fix, solve, resolve
22%

 Pretag team - issue, fix, solve, resolve
60%

 Pretag team - issue, fix, solve, resolve
48%

 Pretag team - issue, fix, solve, resolve
23%

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.,Not all HOCs look the same. Sometimes they accept only a single argument, the wrapped component:,Concretely, a higher-order component is a function that takes a component and returns a new component.

const EnhancedComponent = higherOrderComponent(WrappedComponent);
load more v
90%

 Pretag team - issue, fix, solve, resolve
88%

The solution is simple: avoid inline functions and pass a static component to the component prop instead. Let's change the ListItemLink component so CustomLink always reference the same component:,Using an inline function as an argument for the component prop may result in unexpected unmounting, since a new component is passed every time React renders. For instance, if you want to create a custom ListItem that acts as a link, you could do the following:,⚠️ However, this strategy suffers from a limitation: prop collisions. The component providing the component prop (e.g. ListItem) might not forward all the props (for example dense) to the root element.

Let's see an example:

const WrappedIcon = props => <Icon {...props} />;
WrappedIcon.muiName = Icon.muiName;
load more v

Other "react-withrouter" queries related to "React.memo and withRouter"