react component being rendered twice

Question

i'm new to react and i am working on a project with react frontend and java (Spring Boot) backend that performs some web scraping and returns data to react ui. Normally it's totally fine to render an element twice in development but i may banned due to sending too many requests in web scraping process. So i want to prevent that.

I have tried:

• Disabled devtools

but the issue is remaining

---

my component that being rendered twice:

import React from 'react';
import SearchService from '../../service/SearchService';
import BookShelf from '../fragment/BookShelf';
import PageHeader from '../fragment/PageHeader';
import LoadingScreen from '../modal/LoadingScreen';
import Error from '../fragment/Error';
import { Book } from '../../model/entity/Book';

class SearchPage extends React.Component {
  constructor() {
    super();

    const user = JSON.parse(localStorage.getItem("user"));

    this.state = {
      key: new URLSearchParams(window.location.search).get("key"),
      loading: false,
      user: user,
      searched: false,
    };

  }

  componentDidMount() {
    const{key, searched} = this.state;

    if(!searched) {
        SearchService.search(key).then(response => {
            console.log(response.data);
            this.setState({
                data: response.data,
                loading: false,
                searched: true,
            });
        }).catch(err => {
            this.setState({
                errorMessage: err.response.data,
                loading: false,
                searched: true,
            })
        });
    }
  }

  render() {
    const{user, loading, data, key, errorMessage} = this.state;

    const map = () => {
        const shelf = data.resultSet.map(result => 
            <div className='shelf-wrapper' key={result.source}>
                <h4 className='shelf-title'>{result.source}</h4>
                <div className="search-info">
                    <span>{"min: " + parseFloat(result.lowestPrice).toFixed(2) + ""}</span>
                    <span>{"average: " + parseFloat(result.averagePrice).toFixed(2) + " ₺"}</span>
                    <span>{"max: " + parseFloat(result.highestPrice).toFixed(2) + ""}</span>
                </div>
                <BookShelf bookList={result.result} compare={true}/> 
            </div>
        );
        return shelf;
    }

    return(
        <div className="container primary-background">
            { loading && 
                <LoadingScreen/>
            }

            <PageHeader/>

            <h1 className='center-align'>{"search results for: '" + key + "'"}</h1>
            { data &&
                map()
            }

            { errorMessage && 
                <Error message={errorMessage}/>
            }
        </div>
    );
  }

}

export default SearchPage;

---

and the router that rendering this component:

import './App.css';
import LoginPage from "./component/auth/login_page";
import SignupPage from "./component/auth/signup_page";
import {BrowserRouter, Routes, Route} from "react-router-dom";
import HomePage from "./component/home/home_page";
import UserService from './service/UserService';
import BookDetails from './component/book/BookDetails';
import SearchPage from './component/home/SearchPage';
import { disableReactDevTools } from '@fvilers/disable-react-devtools';
import { Component } from 'react';

disableReactDevTools();

export default class App extends Component {

  componentDidMount() {
    
  }

  render() {
    return (
      <BrowserRouter>
          <Routes>
              <Route path="/login" element={<LoginPage redirect="/home"/>}/>
              <Route path="/signup" element={<SignupPage/>}/>
              <Route path="/home" element={<HomePage/>}/>
              <Route path="/" element={<HomePage/>}/>
              <Route path="/search" element={<SearchPage/>}/>
              <Route path="/book/details" element={<BookDetails/>}/>
          </Routes>
      </BrowserRouter>
    );
  }
}

Answer 1

For React.StrictMode issue, the solution can be your rendered component which renders twice that maybe wrap with React.StrictMode. Comment out or clean up the React.StrictMode, I hope it will fix.