Comments (10)
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.
Related Issues (20)
- How can I hide the page shadowing? HOT 6
- Issue: Input fields and drop-downs do not work HOT 1
- Could not find declaration for Module 'react-flip-page' HOT 2
- Error when adding responsive attribute HOT 2
- Error using ref in Functional Component TypeError: flipPage.gotoNextPage is not a function HOT 2
- An in-range update of babel7 is breaking the build 🚨 HOT 11
- Update the value of startAt after the first render HOT 1
- Using gotoNextPage after flip half page correctly but the other half flips immediately without notice HOT 3
- Security vulnerability for uglifyjs-webpack-plugin/serialize-javascript HOT 9
- Using on Mobile devices gives unexpected black background HOT 2
- flipOnTouch and goto methods - uncutPages does not work, half the animation does not work HOT 3
- Background Color Split in two for Span when it sits Between Pages HOT 2
- Next JS - ReferenceError: window is not defined HOT 1
- Pages blank until after flipped HOT 10
- cannot use input element HOT 1
- Position of "middle of page" HOT 1
- Fragments HOT 4
- TypeError: Cannot set property 'FlipPage' of undefined HOT 1
- Is this supporting on react-native also ? HOT 2
- gotoPage(page) its not reflecting animation effect
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-flip-page.