1

I am new to react and I am trying to develop a simple web app with it but I get an error. My Constructor is called twice when I load a class component can you help?

Home.js


import React from 'react'
import Land from "../Land";

function Home() {
    return (
        <div>
            <h1>Home!</h1>
            <Land/>
        </div>
    )
}

export default Home


Partial Land.js

import React, { Component } from 'react'
import Login from "./Login";

class Land extends Component {
    constructor(props) {
        super(props)
        this.state = {

        }
        console.log("LAND")
    }

the log LAND is hit twice. In some of the components I wish to make an API call that hits a DB but I only want to hit it once. In many instances using componentDidMount is not convenient because props only appear after componentDidMount therefor id like to do the call in render(I will not be using setState, that would cause a reload of render).

Thanks in advance

Pedro Dimas
  • 517
  • 1
  • 3
  • 11
  • Does this answer your question? [Constructor getting called twice React Component](https://stackoverflow.com/questions/47644387/constructor-getting-called-twice-react-component) – Temoncher Aug 09 '20 at 00:08
  • @Temoncher I've read that topic but I am still confused, They recommend the use of ```componentDidMount```. but when I can not call a function component from a class component within ```componentDidMount``` – Pedro Dimas Aug 09 '20 at 00:13
  • Maybe you're rendering `Home` twice? And no, you definitely should not do API calls in the constructor. You'll need to re-render anyway after asynchronous response. – Bergi Aug 09 '20 at 00:13
  • @Bergi I put a log on home and it was hit only once. BTW, is it ok to put api calls on ```componentDidMount```? – Pedro Dimas Aug 09 '20 at 00:15
  • For example in this function component, it is called twice, once where the props aren't loaded and after that one where the props are loaded. I use the props to construct the api url and if the prop is "" i get a different api call that returns wrong data ```function EventProps(props) { console.log(props.event_id); if (props.event_id == "") return (

    Hold up

    ) const url = "/events/"+props.event_id; console.log(url);```     – Pedro Dimas Aug 09 '20 at 00:17

2 Answers2

1

I didn't quite get what are you trying to say in the comment, but you totally can call function that fetches data within componentDidMount hook

Here's an example: https://codesandbox.io/s/react-calls-constructor-twice-q5gzs

Temoncher
  • 644
  • 5
  • 15
  • Ohhhhh now i see what you mean. So would you recommend using class components for components with api calls? And if so i should put the result of said api call on state so the render can "rerender" when the call is complete? Thanks for your time! – Pedro Dimas Aug 09 '20 at 00:28
0

You are using <StrictMode/> and it's development mode

While in <StrictMode/>, react will detect unexpected side effects which will call lifecycle functions more than once duration the development mode, will not be trigger twice in production.

From docs:

why is called twice

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:

Class component constructor, render, and shouldComponentUpdate methods

Class component static getDerivedStateFromProps method

Function component bodies

State updater functions (the first argument to setState)

Functions passed to useState, useMemo, or useReducer

will not call twice

Note:

This only applies to development mode. Lifecycles will not be double-invoked in production mode.

Oboo Cheng
  • 4,250
  • 3
  • 24
  • 29