React Loadable doesn't update on browser refresh

Question

I have a slide that renders a bunch of cards with some information. The cards height is based on the height of the highest card. I am making use of react-slick for my slider. On the first render the cards are all set to one height, but when i refresh the browser the cards are not of the same height.

My code is as following

Slider.jsx

import Loadable from 'react-loadable';
.....


const Slider = Loadable({
    loader: () => import('react-slick'),
    loading: () => null,
  });

class Slider extends Component{
   constructor(){
     this.state={ height: 0 }
     this.cards = [];
   }

   componentDidMount(){
      const height = this.getHighestHeight(this.cards);
      this.setState({height});
   }

   getHighestHeight(cards){
    //calculates the highest height of the cards
    ......
   }

   render(){
     ...
     <Slider ...>
       <Cards height={this.state.height} />
     </Slider>
     ....
   }

}

I understand that Loadable is asynchronous component, could that be the reason it does not set the height on browser refresh

Answer 1

There is the possibility you are testing the height of images that have no height yet. componentDidMount() means the components have rendered as in the <img .. /> tags have rendered but not necessarily loaded. In your getHighestHeight fx, try checking if it's loaded then test its height.

Answer 2

You have Slider defined twice.

Rename the loadable slider to something else

const LoadableSlider = Loadable({
    loader: () => import('react-slick'),
    loading: () => null,
});

Then in render:

<LoadableSlider>
  <Cards height={this.state.height} />
</LoadableSlider>

See if that solves your problem.