Why is my React component is rendering twice?

Question

I don't know why my React component is rendering twice. So I am pulling a phone number from params and saving it to state so I can search through Firestore. Everything seems to be working fine except it renders twice... The first one renders the phone number and zero points. The second time it renders all the data is displayed correctly. Can someone guide me to the solution.

class Update extends Component { constructor(props) {     super(props);     const { match } = this.props;     this.state = {         phoneNumber: match.params.phoneNumber,         points: 0,         error: ''     } }  getPoints = () => {     firebase.auth().onAuthStateChanged((user) => {         if(user) {             const docRef = database.collection('users').doc(user.uid).collection('customers').doc(this.state.phoneNumber);             docRef.get().then((doc) => {                 if (doc.exists) {                 const points = doc.data().points;                 this.setState(() => ({ points }));                 console.log(points);                 } else {                 // doc.data() will be undefined in this case                 console.log("No such document!");                 const error = 'This phone number is not registered yet...'                 this.setState(() => ({ error }));                 }                 }).catch(function(error) {                 console.log("Error getting document:", error);                 });         } else {             history.push('/')         }     }); }  componentDidMount() {     if(this.state.phoneNumber) {         this.getPoints();     } else {         return null;     } }  render() {     return (         <div>             <div>                 <p>{this.state.phoneNumber} has {this.state.points} points...</p>                 <p>Would you like to redeem or add points?</p>             </div>             <div>                 <button>Redeem Points</button>                 <button>Add Points</button>             </div>         </div>     );   } }  export default Update; 

Answer 1

You are running your app in strict mode. Go to index.js and comment strict mode tag. You will find a single render.

This happens is an intentional feature of the React.StrictMode. It only happens in development mode and should help to find accidental side effects in the render phase.

From the docs:

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:...

^ In this case the render function.

Official documentation of what might cause re-rendering when using React.StrictMode:

https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects