React redux props lifecycle issue - reactjs

Question

I'm encountering a small issue for which I did fix the problem but I'm really looking for an better solution !
Let's suppose you have a Parent A component which role is to dispatch an action to fetch data.
class ParentA extends Component {
constructor(props) {
super(props)
const { dispatch } = this.props;
dispatch(actionRequest({ clientId: props.match.params.customerId }))
}
render() {
const { customer, isFetching } = this.props;
if(isFetching){
return <Spinner />
}
if(!customer){
return null
}
return <CustomerDetailsPage customerId={this.props.match.params.customerId} customer={customer} {...this.props} />
}
}
export default connect(state => ({
customer: getClient(state),
isFetching: isClientFetching(state)
}))(ParentA)
Nothing very complicated here.
Let's suppose I dispatch an action in my saga before the api call, to set isFetching to true, and one after the api call success or error to isFetching back to false.
Of course my initial state for this reducer has isFetching to false.
My action creators look like that (dont pay attention the wrapper reducer, the important thing is is the different actions )
const setFetching = isFetching => state => state.set('fetching', isFetching)
export default createReducer(initialState, {
[actionSuccess]: [setClient],
[actionRequest]: [setFetching(true)],
[actionFulfill]: [setFetching(false)],
})
The problem, to summarize is this one : when the reducer is at its initial state, there is no problem because I will put the fetched data for the first time so it is null during the first render.
The thing is about when the ParentA component unmounts, redux still store the previous value.
So when I come back to ParentA, the selector in the connect function has already a value.
Its causes at the end a useless first render of the child of ParentA since isFetching is false and customer in my exemple is not null as I just say.
In the end it causes a useless child rendering but imagine the child of ParentA fetched itself data, then it causes 2 fetches from the child !
I solved this by moving the isFetching and customer deeper in the tree, in the child but I would like to avoid splitting my props and handle this in ParentB.
I cannot memoized ParentA because the isFetching is indeed changing.
What would you eventually suggest?

Answer 1

I know this won't be a satisfying answer, but you would have an easier time if you were using functional components with hooks. The useEffect hook is very powerful and would 100% help you solve this problem easily. Otherwise, in Class Components, you will need to leverage lifecycle hooks like ComponentDidMount, ComponentWillUnmount etc.

Answer 2

I'm not sure if this is what you are looking for but these tips might help you down the line.
For your issue it would be better if you stored your data (customer & isFetching) as part of the class's state and make the action return the fetched value.
Try using lifecycle methods to handle/manipulate your state. That is instead of dispatching an action in the constructor you could do the same in componentDidMount/componentDidUpdate methods.
Try extending your class from React.PureComponent instead of React.Component. PureComponent makes your life easier by preventing unnecessary re-renders by comparing to see if the state or the props have changed. Whereas if you extend your class off a component it is up to you to manage the re-renders using the shouldComponentUpdate lifecycle method.
The below structure might help you solve your current issue.
import React, {PureComponent} from 'react'
const DEFAULT_CUSTOMER = {id: ''}
class ParentA extends PureComponent {
constructor(props) {
super(props)
this.state = {
customer: DEFAULT_CUSTOMER,
isFetching: false,
}
}
// Will be called once the component has been mounted successfully
componentDidMount() {
this.fetchCustomer()
}
//Incase your component doesn't un mount and just re-renders the content based on the client id
// you might have to use the componentDidUpdate
// will get invoked everytime the props or the state changes
componentDidUpdate(prevProps, prevState) {
const { clientId: oldClientId } = prevProps
const { clientId } = this.props
// essential for you to do some sort of check to prevent an infinite loop
if ( clientId !== oldClientId ) {
//will reset the customer to the default customer
this.setCustomer()
this.fetchCustomer()
}
}
// Set the value of isFetching
setIsFetching => (isFetching) =
this.setState({
isFetching,
})
// Set the value of customer
setCustomer => (customer = DEFAULT_CUSTOMER) =
this.setState({
customer,
})
// Dispatches the action to fetch customer
fetchCustomer => async () = {
try {
const { match, dispatch } = this.props
const { clientId } = match.params
this.setIsFetching(true)
// Assuming you are passing back the JSONIFIED response back
const resp = await dispatch(actionRequest({ clientId, }))
this.setCustomer(resp.body.customer)
this.setIsFetching(false)
} catch (e) {
this.setIsFetching(false)
}
}
render() {
const { customer, isFetching } = this.state;
if(isFetching){
return <Spinner />
}
if(!customer.id){
return null
}
return <CustomerDetailsPage customerId={this.props.match.params.customerId} customer={customer} {...this.props} />
}
}
export default ParentA