Question 211118 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why is my functional component being called multiple times?

I’m trying to create this webpage with a table of users data. For some reason the table component is being called multiple times and I’m not able to figure out why.

import React, { useState, useEffect } from "react";
import Table from "../components/Table";
import { getCount } from "../apis/common_apis";
import { getAllUsers } from "../apis/user_apis";
import { LoadingSpinner } from "../components/spinner";

const Users = () => {
  const [loading, setLoading] = useState(false);
  const [displayTableData, setDisplayTableData] = useState(false);
  const [users, setUsers] = useState([]);
  const [count, setCount] = useState(0);
  const [showMore, setShowMore] = useState(false)
  const [pageState, setPageState] = useState({
  });
  const [sortState, setSortState] = useState({
    headerId: "email",
    orderBy: "ASC",
  });
  const headers = [
    {
      id: "username",
      title: "User Name",
      applySort: true,
      checked: false,
    },
    {
      id: "name",
      title: "Name",
      applySort: true,
      checked: false,
    },{
      id: "email",
      title: "Email",
      applySort: true,
      checked: true,
    },
    {
      id: "roleName",
      title: "Role(s)",
      checked: true,
    },
    {
      id: "lastLoginTime",
      title: "Last Login",
      applySort: true,
      checked: false,
    },
    {
      id: "createdUserName",
      title: "Created By",
      checked: false,
    },
    {
      id: "isActive",
      title: "Status",
      applySort: true,
      type: "statusIcon",
      checked: true,
    },
    {
      id: "actions",
      actionTypes: ["Edit", "Delete"],
      title: "Actions",
      checked: false,
    },
  ];

  async function fetchTableDataCount() {
    setCount(await getCount("users", {}));
  }
  async function fetchTableData() {
    setLoading(true);
    fetchTableDataCount();
    setUsers(
      await getAllUsers(
        pageState.limit,
        pageState.skip,
        `${sortState.headerId} ${sortState.orderBy}`
      )
    );
    setDisplayTableData(true);
    setLoading(false);
  }

  useEffect(() => {
    if (pageState && pageState.limit > 0 && pageState.skip >= 0 && pageState.currentPage > 0 && sortState.headerId && sortState.orderBy) {
    fetchTableData();
    }
  }, [pageState]);

  useEffect(() => {
    if (pageState && pageState.limit > 0 && pageState.skip >= 0 && pageState.currentPage > 0 && sortState.headerId && sortState.orderBy) {
    fetchTableData();
    }
  }, [sortState]);

  return (
    <div class="container-fluid">
      <LoadingSpinner loading={loading} />
      <div class="container-fluid row table-title">Users</div>
      <Table
        headers={headers}
        data={users}
        count={count}
        setPageState={setPageState}
        sortState={sortState}
        setSortState={setSortState}
        displayTableData={displayTableData}
        showMore={showMore}
      />
    </div>
  );
};

export default Users;

This is how I have coded the function. I’ve been stuck here on why this keeps happening. Could someone help me out and let me know why <Table/> is being hit multiple times?

Tags:

2

Answers


  1. 0

    This is how React works. Every time a state changes in any of the parent components, the component is being re-rendered, i.e. called again. This doesn’t necessarily mean that anything will change in you component, the properties might still be the same.

    A React component can never rely on the number of times it’s being called. If it does that, you need to use another approach.

    Login or Signup to reply.
  2. 0

    You can use Hooks to render the table component with a condition.

    const [callTable, setCallTable] = useState(false);
  
  useEffect(() => {
    setCallTable(true)
  }, [users]);

{callTable && (
  <Table
        headers={headers}
        data={users}
        count={count}
        setPageState={setPageState}
        sortState={sortState}
        setSortState={setSortState}
        displayTableData={displayTableData}
        showMore={showMore}
      />
)}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search