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

I can't post a comment, but this is more a question than an answer. Firstly, are you still having this problem? And then if so you should try logging height values of your cards at each render/componentDidMount, or whenever they set state.height, maybe at the moment where you set the max height, the card doesn't exist yet, or it exists but has no content, and therefore has an incorrect height! The behavior of it working on first render, but not subsequent refreshes doesn't make any sense. Do you mean really refreshing the browser? Or going from one page to another inside a react-router or some — Guillaume Richard, Feb 03 '19 at 09:55
can you give more information abou the code. Above code doesnt make much sense.Also you declared `Slider as const` and then declared again `Slider as Class` — Gaurav Saraswat, Feb 06 '19 at 19:53

score 0 · Answer 1 · answered Feb 07 '19 at 23:12

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.

score 0 · Answer 2 · answered Feb 08 '19 at 19:41

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.

React Loadable doesn't update on browser refresh

2 Answers2