How to make react component not to re-render, when sibling re-renders?

Question

OK, so I just started to play with react and redux, and have encountered problem. I have button which calls API, and receives info about some cars. It works like this:

on button click it dispatches function getCars(), this in turn dispatches pendingAction, then fetches info, then dispatches successAction or errorAction. (I'll show all code bellow).

My problem is:

while loading new info it changes states to pending, and then re-renders pictures, even though they have same src. I want, to avoid re-render as, it makes pictures flash to white for a second.

I have my app set up like this:

//index.js

import App from './App';
import * as serviceWorker from './serviceWorker';
import { applyMiddleware, createStore, compose } from 'redux';
import { Provider } from 'react-redux';
import Reducers from './/Reducers';
import thunk from 'redux-thunk';

const middlewares = [thunk];

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(Reducers, composeEnhancers(
    applyMiddleware(...middlewares)
));  

ReactDOM.render(
   
    
   ,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: somelink 
serviceWorker.unregister();

Then my app.js

//App.js

import React from 'react';
import 'rsuite/dist/styles/rsuite-default.css';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, login, logout } from './/Actions/TestingActions';
import  GetCars  from './/API/Cars/GetCars';
import { Button } from 'rsuite';
import CarView from './Components/CarTestView/CarView'
//import './index.css';


function App() {
    const counter = useSelector(state => state.count)
    const logged = useSelector(state => state.loggedin)
    const dispatch = useDispatch()

    return (
    
            //  
            //   I hidden some unrelated code here  ...              
            //  
            
            
    
  );
}

export default App;

GetCars...

//GetCars.js

import { apiCarsError, apiCarsSuccess, apiCarsPending } from '../../Actions/TestingActions';
export function GetCars() {    
    return dispatch => {
        dispatch(apiCarsPending());
        fetch('https://localhost:44342/API/GetRandomCar')
            .then(res => {
                res.json().then(res => {
                    if (res.error) {
                        throw (res.error);
                    }
                    dispatch(apiCarsSuccess(res));
                    return res;
                })
                    .catch(error => {
                        dispatch(apiCarsError(error));
                    })
            });
            
    }
}

export default GetCars;

finally CarView.

import React from 'react';
import { connect, useSelector } from 'react-redux';
import { bindActionCreators } from 'redux';
import { GetCars } from '../../API//Cars//GetCars';
import { getCars, getCarsPending, getCarsError } from '../../Reducers//TestingReducer';
import { Loader, Placeholder, Panel, /*PanelGroup*/ } from 'rsuite';
//import { CSSTransition, TransitionGroup  } from 'react-transition-group';
const { Paragraph } = Placeholder;

function CarView() {
    const pending = useSelector(state => state.API.pending)
    //const error = useSelector(state => state.API.error)
    const cars = useSelector(state => state.API.cars)
    if (pending && cars.length === 0) return (    
        
            {console.log("Update is nulio")}
                
                       
                      
        )

    if (pending) return (   
        
            {console.log("Update pending")}
                
            
                    
            
            
        )

    if (cars.length === 0) return ({console.log("tuscia")})

    return (
                       
            {console.log("uzkrauta || new info")}
                
                    
                
            
        )
}

class Carvaizdas extends React.PureComponent {

    shouldComponentUpdate() {      
        console.log("Should render ?"); 
        console.log(this.props.updatePicture); 
        return this.props.updatePicture;
    }

    render() {
        console.log("render cars");        
        return (
            <>
       Masinos
                {this.props.cars.map(car => )}
            
        );
    }
}

class CarKorta extends React.PureComponent {
    render() {
        return (
            
                
                    
                        
                    
                
                
                    
                        Year: {this.props.car.year}
                        

                        Model: {this.props.car.model}
                    
                
            
        );
    }
}

const mapStateToProps = state => ({
    error: getCarsError(state),
    cars: getCars(state),
    pending: getCarsPending(state)
})

const mapDispatchToProps = dispatch => bindActionCreators({
    CarView: GetCars()
}, dispatch)

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(CarView);

Thanks for your help.

Rostyslav · Accepted Answer

The problem is in using 2 instances of component Carvaizdas under a different condition. This makes no sence for shouldComponentUpdate hook which is specific PER INSTANCE.

if (pending)
  return (
    
      {console.log("Update pending")}
      
      
         {/** first component instance */}
      
    
  );

if (cars.length === 0) return {console.log("tuscia")};

return (
  
    {console.log("uzkrauta || new info")}
    
       {/** second component instance */}
    
  
);

In order to shouldComponentUpdate to work there should be only single instance

return (
  
    {console.log("uzkrauta || new info")}
    
      
    
  
);

And in this component using shouldComponentUpdate makes no sense too

class Carvaizdas extends React.PureComponent {
  render() {
      console.log("render cars");        
      return (
          <>
     Masinos
              {this.props.cars.map(car => )}
          
      );
  }
}

It only makes sense for CarKorta. You should remove shouldComponentUpdate from Carvaizdas and add it to CarKorta. Also you will have to store the previous picture in CarKorta state in order to be able to compare it with next picture. For this you have to use getDerivedStateFromProps

class CarKorta extends React.PureComponent {
  state = {
    car: null,
  };

  shouldComponentUpdate(nextProps) {
    return !this.state.car || this.state.car.picture !== nextProps.car.picture;
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    return {
      car: { ...nextProps.car },
    };
  }

  render() {
    return (
      
        
      
    );
  }
}

How to make react component not to re-render, when sibling re-renders?

OK, so I just started to play with react and redux, and have encountered problem. I have button which calls API, and receives info about some cars. It works like this:

My problem is:

Answers (2)

Related Questions