When component is rendered with data, graph is not drawn

[Luftzig]

We have used the component in the following manner:

class AudioVisualization extends React.Component<AudioVisualizationProps, {}> {
  // More logic here...
   render() {
        const { currentAudioData, audioMarkerPosition, audioPlaying } = this.props;
        return currentAudioData ? (
            <AudioVisualizationWrapper onClick={this.playPauseAudio}>
                <Waveform 
                    buffer={ currentAudioData.audioBuffer }
                    height={visualizationSize.height}
                    markerStyle={{
                        color: "#85C412",
                        width: 2
                    }}
                    onPositionChange={(pos: number) => this.markerPositionChanged(pos)}
                    position={audioMarkerPosition}
                    responsive={false}
                    showPosition={true}
                    waveStyle={{
                        animate: true,
                        color: '#652379',
                        pointWidth: 1
                    }}
                    width={visualizationSize.width}
                />
                <Sound
                    url={currentAudioData.audioURL}
                    autoLoad={true}
                    playFromPosition={'duration' in currentAudioData.audioBuffer ?
                        getAudioPlaybackPosition(audioMarkerPosition, currentAudioData.audioBuffer.duration)
                        : 0
                    }
                    playStatus={audioPlaying ? Sound.status.PLAYING : Sound.status.PAUSED}
                    onPlaying={(sound: any) => this.soundPositionToMarker(sound.position, sound.duration)}
                />
            </AudioVisualizationWrapper>
        ) : null
    }
}

When AudioVisualization is first rendered, it shows without the graph itself.

In the image above we can see that the cursor is drawn, but the data is not.

The next time the component is drawn it is displayed correctly (in example when the data changes).

Analysis of the code at runtime showed that the only time in which the data is set in the component is when componentWillReceiveProps but when the component is rendered for the first time this life-cycle hook is never called.

A workaround was to render the component before we have the data, so componentWIllReceiveProps will be called when the buffer props is updated with the data.

React and related packages versions:

 yarn list --depth=0 --pattern react
yarn list v1.9.4
├─ @babel/helper-builder-react-jsx@7.3.0
├─ @babel/plugin-transform-react-constant-elements@7.2.0
├─ @babel/plugin-transform-react-display-name@7.2.0
├─ @babel/plugin-transform-react-jsx-self@7.2.0
├─ @babel/plugin-transform-react-jsx-source@7.2.0
├─ @babel/plugin-transform-react-jsx@7.3.0
├─ @babel/preset-react@7.0.0
├─ @fortawesome/react-fontawesome@0.1.4
├─ @svgr/babel-plugin-transform-react-native-svg@4.0.0
├─ @types/hoist-non-react-statics@3.3.0
├─ @types/react-dom@16.8.2
├─ @types/react-fontawesome@1.6.4
├─ @types/react-native@0.57.38
├─ @types/react-redux@7.0.2
├─ @types/react-router-dom@4.3.1
├─ @types/react-router-redux@5.0.18
├─ @types/react-router@4.4.5
├─ @types/react-scroll@1.5.4
├─ @types/react@16.8.6
├─ babel-plugin-transform-react-remove-prop-types@0.4.24
├─ babel-preset-react-app@9.0.0
├─ css-to-react-native@2.3.0
├─ eslint-config-react-app@4.0.1
├─ eslint-plugin-react-hooks@1.6.0
├─ eslint-plugin-react@7.12.4
├─ hoist-non-react-statics@2.5.5
├─ react-app-polyfill@1.0.1
├─ react-dev-utils@9.0.1
├─ react-dom@16.8.3
├─ react-error-overlay@5.1.6
├─ react-is@16.8.4
├─ react-keydown@1.9.11
├─ react-redux@6.0.1
├─ react-router-dom@4.3.1
├─ react-router-redux@4.0.8
├─ react-router@4.3.1
├─ react-scripts@3.0.1
├─ react-scroll@1.7.12
├─ react-sound@1.2.0
├─ react@16.8.3
└─ waveform-react@0.2.3