The components get rendered too much about react-flip-page HOT 10 CLOSED

Okay so I came up with a solution, but want to know your opinion before implementing this.

The idea would be to not render pages anymore. Instead, it would render a react-flip-page page component with an associated actual page component. This custom page component would implement shouldComponentUpdate to actually re-render only when it has been set as the current page via props.

What are your thoughts about this @slevy85 ?

from react-flip-page.

Thank you for answering this so fast.

I think it is good idea but does it mean that every pages in <FlipPage> should implement shouldComponentUpdate or just the react-flip-page page ?

Further more I read this in the React doc

Currently, if shouldComponentUpdate() returns false, then UNSAFE_componentWillUpdate(), render(), and componentDidUpdate() will not be invoked. Note that in the future React may treat shouldComponentUpdate() as a hint rather than a strict directive, and returning false may still result in a re-rendering of the component.

from react-flip-page.

Interesting, I am trying to make this work.

The idea would be that only the wrapper page would stop from re-rendering.

from react-flip-page.

Then I think it is a great idea.
What is the way you would implement it ?
I found in SO some useful information about high order component that could be a solution for us.

from react-flip-page.

This is exactly what is needed: a higher order component.

This is what I came up with:

class FlipPageItem extends PureComponent {
  render() {
    return this.props.component;
  }
}

And usage:

const pageItem = <FlipPageItem
  shouldUpdate={activeItem}
  component={_page}
/>;

const clonedBeforeItem = <FlipPageItem
  component={beforeItem}
  shouldUpdate={activeItem}
/>;
const clonedAfterItem = <FlipPageItem
  component={afterItem}
  shouldUpdate={activeItem}
/>;

This way, there are much less renders. Components still get rendered even though they are not visible at first: they must be rendered underneath current page.

I plan on releasing this today.

from react-flip-page.

Hey @slevy85, you should try [email protected] as I have implemented said change.

There are no useless renders on page components now: only when halves need to be displayed.

from react-flip-page.

Hi @darenju, thank you very much for this great work.

I don't see the package in npm:
npm ERR! notarget No matching version found for react-flip-page@^0.17.0
Is it normal ?

from react-flip-page.

There was a problem in travis build. This is fixed: [email protected]

from react-flip-page.

Thank you it is working great, there is less renders and it feels faster.

from react-flip-page.

Thank you for reporting this issue, it has helped the package improve performance.

Closing this now.

from react-flip-page.