Issue 1:
bug

You can find the code : https://codesandbox.io/s/j3233w91xw

Code explanation :

The Parent component called "ManageEvents" make an API call to get a list of Events from the backend.

Once the events get fetch, I use the function "map" to create the child components called "EventCard" that takes in arguments the events parameters that i fetched. (eventName, eventLocation... and EventPictureIDs)

In the EventCard component, I fetch the pictures url using the EventPictureIDs parameter and store the urls in the state called "picture" ( state = { picture: [] }; )

Then I display the pictures in the component call "CarouselComponent"

**Note : **

I just added a button "delete" to delete the cards that you will create. You will get an error on the deletion ( in the javascript console) but if you refresh the page the card will be deleted.

PLEASE DO NOT DELETE THE CARD THAT ALREADY EXIST OTHERWISE YOU WONT BE ABLE TO REPRODUCE THE ERROR

What is the current behavior?

Issue :

When I create a new Event, I click on the button "Create Event" that triggers the action to create a default event as follow :

let postData = {

name: "New Event",

location_name: "Paris",

location_lat: 34.12345,

location_lng: -14.12345,

description: "Add the Event's Description",

date: moment().format("YYYY-MM-DDThh:mm"),

participant: 20,

picture: []

};

and once the event is created in the backend, I use the function "val.unshift(res.data); setstate(....);" to add the event to the ManageEvent State (I use unshift to have the new event being shown as the first Card)

And then I re-render the component.

The issue is that even if the new event does not have any pictures ( picture: [] ),

Reactjs render the component "EventCard" showing pictures for this new event.

Reactjs uses the pictures from the previous card for this new card

If you refresh the page, the new card will appear correctly without pictures. but it should appear like that without to refresh the page.

The state of EventCard ( ( state = { picture: [] }; ) ) is not re-init to empty at the each component creation.

Note :

when using "unshift" the new card appears at the first place with picture (should not appears with pictures)

when using "push" instead of "unshift" the new card appears at the last place without pictures (expected)

What is the expected behavior?

I want to use "unshift" to have the new card at the first place without pictures

**Which versions of React, and which browser / OS are affected by this issue? **

"react": "^16.5.2"

Chrome - Firefox

Issue 2:
Do you want to request a feature or report a bug?

Request a feature

What is the current behavior?

getDerivedStateFromProps does not expose prevProps

What is the expected behavior?

getDerivedStateFromProps should expose prevProps for cleaner implementation of use case mentioned below.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

react: 16.4+

I know there was a similar discussion in the issues here before regarding exposing previous props in getDerivedStateFromProps, but I believe I came across a use case where this can be useful, its very specific, yet it required me to replicate a lot of previous props in the state.

Below is a component I use in react-native to add an animation where screens crossfade and don't just unmount instantly, it also checks if next route is an overlay and preserves screen behind it. As you can see I had to create prevPathname prevData and prevChildren for this to work, which I think is not too terrible, yet results in a lot of repetition.

Perhaps my implementation is missing something to remove the repetition or maybe I am not understanding why we are not exposing prevProps?

// @flow
import React, { Component } from 'react'
import { Animated } from 'react-native'
import { durationNormal, easeInQuad, easeOutQuad } from '../services/Animation'
import type { Node } from 'react'

type Props = {
pathname: string,
data: ?{ overlay: boolean },
children: Node,
authenticated: boolean
}

type State = {
prevPathname: ?string,
prevChildren: Node,
prevData: ?{ overlay: boolean },
animation: Animated.Value,
activeChildren: Node,
pointerEvents: boolean,
authAnimation: boolean
}

class RouteFadeAnimation extends Component<Props, State> {
state = {
prevPathname: null,
prevChildren: null,
prevData: null,
animation: new Animated.Value(0),
activeChildren: null,
pointerEvents: true,
authAnimation: true
}

static getDerivedStateFromProps(nextProps: Props, prevState: State) {
const { pathname, data, children } = nextProps
const { prevPathname, prevData, prevChildren } = prevState
// This will be returned always to store "previous" props in state, so we can compare against them in
// future getDerivedStateFromProps, this is where I'd like to use prevProps
const prevPropsState = {
prevChildren: children,
prevPathname: pathname,
prevData: data
}
// Check if pathname changed, i.e we are going to another view
if (pathname !== prevPathname) {
// Check if current visible view is a modal, if it is, we go to default return
if (!prevData || !prevData.overlay) {
// Check if future view is not a modal
if (!data || !data.overlay) {
// Preserve current view while we are animationg out (even though pathname changed)
return {
activeChildren: prevChildren,
pointerEvents: false,
...prevPropsState
}
// If future view is a modal, preserve current view, so it is visible behind it
} else if (data.overlay) {
return {
activeChildren: prevChildren,
...prevPropsState
}
}
}
// If previous view was a modal (only normal view can follow after modal) reset our view persistance
// and use children as opposed to activeChildren
return {
activeChildren: null,
...prevPropsState
}
}
// Persist prevProps in state
return {
...prevPropsState
}
}

// This just handles animation based on cases above
componentDidUpdate(prevProps: Props) {
const { pathname, data, authenticated } = this.props
const { authAnimation } = this.state
if (authenticated && authAnimation) this.animate(1)
else if (pathname !== prevProps.pathname) {
if (!prevProps.data || !prevProps.data.overlay) {
if (!data || !data.overlay) this.animate(0)
}
}
}

animate = (value: 0 | 1) => {
let delay = value === 1 ? 60 : 0
const { authAnimation } = this.state
if (authAnimation) delay = 2000
Animated.timing(this.state.animation, {
toValue: value,
duration: durationNormal,
delay,
easing: value === 0 ? easeInQuad : easeOutQuad,
useNativeDriver: true
}).start(() => this.animationLogic(value))
}

animationLogic = (value: 0 | 1) => {
if (value === 0) this.setState({ activeChildren: null }, () => this.animate(1))
else this.setState({ pointerEvents: true, authAnimation: false })
}

render() {
const { animation, pointerEvents, activeChildren } = this.state
const { children } = this.props
return (
<Animated.View
pointerEvents={pointerEvents ? 'auto' : 'none'}
style={{
opacity: animation.interpolate({ inputRange: [0, 1], outputRange: [0, 1] }),
transform: [
{
scale: animation.interpolate({ inputRange: [0, 1], outputRange: [0.94, 1] })
}
]
}}
>
{activeChildren || children}
</Animated.View>
)
}
}

export default RouteFadeAnimation

Usage example and explanation

This component is used to wrap several routes and on pathname change preserve previous view, animate it out, replace it with new view and animate it in. Idea itself comes from react-router's documentation https://reacttraining.com/react-router/native/guides/animation/page-transitions but they use componentWillMount there.

basic implementation can look like this:

<RouterFadeAnimation
pathname={routerProps.pathname}
data={routerProps.data}
authenticated={authProps.auth}>

{routerProps.pathname === "/home" && <HomePage />}
{routerProps.pathname === "/about" && <AboutPage />}

</RouterFadeAnimation>

Outside of this, there is similar component called <RouteModalAnimation /> that overlays component above, it similarly animates views in when routerProps.data has overlay: true set, you will see our original component checks for this and preserves its view so it appears behind the modal, as it would otherwise dissapear due to route change.