How to change the value of rowData state in react hook

Question

index.tsx

    const [activeTab, setActiveTab] = useState({ active: 'customers' });
      const [rowData, setRowData] = useState([]);
    
      const handleChangeTab = (activeKey) => {
        setActiveTab({ active: activeKey });
      }
    
      useEffect(() => {
    
        if (activeTab.active === 'customers') {
          setRowData([
            {
              customId: 1,
              name: "Customer 1",
            },
            {
              customId: 2,
              name: "Customer 2",
            }
          ])
        } else {
          setRowData([
            {
              customId: 1,
              name: "Supplier 1",
            },
            {
              customId: 2,
              name: "Supplier 2",
            }
          ])
        }
      }, []);
    
    return({
    <div>
     <Nav appearance="tabs" activeKey={activeTab.active} onSelect={handleChangeTab} justified>
              <Nav.Item eventKey="customers" icon={<Icon icon='group' />}>
                Customers
              </Nav.Item>
              <Nav.Item eventKey="suppliers" icon={<Icon icon='truck' />}>
                Suppliers
              </Nav.Item>
            </Nav>
    {rowData && rowData.map((item, index) => (
<div key={index}>
 <label>{index}</label>
<span>ID: {item.customId}</span>< br/>
<span>Name: {item.name}</span><br/></br>
</div>
)}
    </div>
        })

I have a problem when I try to change a tab it doesn't change the value of setRowData. I already also added this:

useEffect((), => { .... }, [rowData]);

but it cause an infinite loop.

How do I to change the value of rowData when every changing tab? without an infinite loop? and also it should change the value of rowData

Answer 1

The useEffect use is correct, but the dependency is wrong. What you should be putting in the dependency array is the value that triggers the effect. In this case, activeTab.active , so it will be useEffect(() =>..., [activeTab.active]); therefore when you change the tab the effect is triggered.

Answer 2

const rowData =
  activeTab.active === 'customers'
    ? [
        {
          customId: 1,
          name: 'Customer 1',
        },
        {
          customId: 2,
          name: 'Customer 2',
        },
      ]
    : [
        {
          customId: 1,
          name: 'Supplier 1',
        },
        {
          customId: 2,
          name: 'Supplier 2',
        },
      ];

specify rowData depending on activeTab.active

update:

you can use useMemo for optimization

const rowData = React.useMemo(
  () =>
    activeTab.active === 'customers'
      ? [
          {
            customId: 1,
            name: 'Customer 1',
          },
          {
            customId: 2,
            name: 'Customer 2',
          },
        ]
      : [
          {
            customId: 1,
            name: 'Supplier 1',
          },
          {
            customId: 2,
            name: 'Supplier 2',
          },
        ],
  [activeTab.active]
);

Answer 3

You specified wrond dependency in useEffect . You need to specify dependency activeTab.active so it triggers correctly. Your useEffect should be useEffect(() => { // your logic here }, [activeTab.active]

Or You can set rowData in handleChangeTab function itself.

const handleChangeTab = (activeKey) => {
  setActiveTab({ active: activeKey });
  if (activeKey === 'customers') {
     setRowData([
        {
          customId: 1,
          name: "Customer 1",
        },
        {
          customId: 2,
          name: "Customer 2",
        }
      ])
 } else {
    setRowData([
       {
         customId: 1,
         name: "Supplier 1",
       },
       {
         customId: 2,
         name: "Supplier 2",
        }
    ])
  }
}