Closed damassi closed 5 years ago
@damassi Thanks for the detailed PR, I need to take a closer look over this. @yaodingyd could you shed some light on the renderPortal
method?
Thanks for your contribution. Unfortunately we do have to use portal to render children. Your code works perfectly fine if your slider items are static, meaning no adding or deleting items. But if they are dynamic, it would break the component because after Flickity is initialized, the children are not rendered in the original DOM hierarchy and we have to use Portal to render them correctly.
@theolampert / @yaodingyd, that makes sense! Wondering, would y'all be open to adding a static
configuration prop to toggle this behavior on and off?
sounds good to me
Cool, i'll update this PR today.
Alright @theolampert - added a commit with static
and updated PR description / title. Let me know if you need anything else.
@theolampert I think I'll update readme later with the discussion of this PR.
Hi @theolampert - would you mind publishing this new version to NPM? Noticed the latest is still 3.2.0
.
@damassi done! please check 3.3.0
This PR adds a new
static
config prop, which when true will skip rendering of a React portal, and simply render children as they are passed into the carousel. This smooths the handshake between client / server rendering, however with the tradeoff: whenstatic
, the carousel cannot be modified at runtime (e.g., slides cannot be dynamically added or removed). For many usecases this tradeoff is acceptable. See this comment for more info.Description of problem
While attempting to implement the carousel component, we noticed that there was a flicker when attaching to the DOM from an SSR pass:
Initially we thought that it was an issue with the underlying flickity instance on init, but digging deeper found that the problem came down to this bit of code, in
react-flickity-component
:During the initialization phase, the carousel instance hasn't yet been instantiated, and so
null
is returned from within react, leading to empty content on the page. When things init, the code proceeds and things execute correctly, albeit with a flicker.However, when playing more with the implementation we found that the portal is unnecessary, even if the carousel is only rendered client-side. By simply returning
this.props.children
in therender
methodeverything attaches and initializes as it should, with the added benefit that it also works correctly during the server -> client handshake pass.
@theolampert - Wondering your thoughts? Why was
renderPortal
used to begin with? By removing it everything seems to work a-ok:No flicker:
We've only been able to test this for our use-case but yeah! Any feedback would be appreciated.
(If you're curious about our SSR implementation, see here.)