asNavFor does not work if slider renders conditionally

[maximalism2]

trafficstars

When you have some async routes or simply conditional rendering of the Gallery (slider) asNavFor attribute does not sync both sliders unless you trigger a redundant force update of the component.

Codesandbox that reproduces the issue: https://codesandbox.io/s/react-slick-playground-0q390?file=/index.js

Scenario:

• First click the show button, both sliders appears on the page but when you navigate between them they don't appear to be synced.
• Click rerender button
• Try navigating between sliders once again. They should be working in sync.

Expected behavior: Both sliders should be synced right after the initial render. OR You should mention in the documentation that you need to force the render of another component when you're using asNavFor property on your slider.

[jorrit]

(commenting here for people with the same issue)

I've found this as well. This is because the ref is null when the slicks render. They set the refs after rendering for the first time, but as there is no rerender, this is not picked up until you force another render.

Personally, I sync my sliders using a callback and not with refs. You might want to try callback refs. I haven't tried it.

[KaziMuneeb]

Finally got the solution https://stackblitz.com/edit/react-nkwgpt?file=src%2FApp.js