CODEWITHSUNDEEP
reactjsreact-nativereact-redux
Le Pham Ngoc Hoai
Le Pham Ngoc Hoai

Reputation: 1

I don't get why my component is called twice in this example

I've been following the complete react native and redux guide on Udemy and there is this part where despite following down to a tee. My LibraryList component still gets called twice. What could be the problem?

LibraryList.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

class LibraryList extends Component {
  render() {
    console.log(this.props);
    return;
  }
}

function mapStateToProps(state) {
  return {
    libraries: state.libraries
  };
}

export default connect(mapStateToProps)(LibraryList);

App.js

import React from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
import { Header } from './components/common';
import LibraryList from './components/LibraryList';

const App = () => {
  return (
    <Provider store={createStore(reducers)}>
      <View>
        <Header headerText='Tech Stack' />
        <LibraryList />
      </View>
    </Provider>
  );
};

export default App;

LibraryReducer.js

import data from './LibraryList.json';

export default () => data;

index.js inside reducers folder

import { combineReducers } from 'redux';
import LibraryReducer from './LibraryReducer';

export default combineReducers({
  libraries: LibraryReducer
});

LibraryList.json

[
{"id": 0,
"title": "Webpack",
"description": "Webpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand."
},
....
]

Expected result: console.log(this.props) runs once and return libraries

Actual result: It runs twice

Upvotes: 0

Views: 1014

Answers (1)

Ben
Ben

Reputation: 155

I had a similar problem with one of my projects.

In LibraryList.js instead of extending Component use PureComponent. PureComponents won't call the render function if the state and the props have not changed, since it integrates a simple check in the shouldComponentUpdate method. https://reactjs.org/docs/react-api.html#reactpurecomponent

You could always implements your own shouldComponentUpdate method with a React Component instead of using the PureComponent. You'll need to be careful when implement the shouldComponentUpdate method with Redux, you may create more bugs. https://redux.js.org/faq/react-redux#why-isn-t-my-component-re-rendering-or-my-mapstatetoprops-running

When I tried your example on Android and iOS, I wasn't able to replicate your issue, it only returned once.

Upvotes: 1

Related Questions