Fetch Data from API when sub component is expanded

[WeiTangLau]

Referring to this example, https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sub-components?file=/src/App.js

when the sub component is expanded, the renderRowSubComponent will be rendered. I will then fetch from API based on the row opened. However, I realised that the component keeps on re-render indefinitely. Any idea how I can mitigate this?

[yimeichuah]

Facing the same problem too. I referred to the SubComponent with lazy (https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sub-components-lazy).

In my SubRowAsync function,

function SubRowAsync ({ row, rowProps, visibleColumns, data: testData }) {
    const dispatch = useDispatch();
    const rsFood = useSelector(state => state.food);

    const [loading, setLoading] = useState(true);
    const [data, setData] = useState([]);

    useEffect(() => {
        let d = row.original;
        dispatch(getFavFood({ FoodId: d.food_id }));
    }, [dispatch, row.original]);

    useEffect(() => {
        if (rsFood) {
            setLoading(false);

            let temp = [];
            temp.foodName = rsFood.name;
            temp.foodCategory = rsFood.category;

            setData(temp);
        }
    }, [rsFood]);

    return (
        <tr>
            <td colSpan={visibleColumns.length}>
                {loading 
                    ?  <p>Loading...</p>
                    : (
                        <pre style={{ fontSize: '10px' }}>
                            <code>{JSON.stringify({ values: data }, null, 2)}</code>
                        </pre>
                    )
                }
            </td>
        </tr>
    );
}

When I expand row 1, API is fetched, data is returned, and the expanded subComponent is showed. Then I expand row 2, problem happens. The row 1 data is override with the row 2 data. How to sort this out?

[navoditbharat]

Facing the same issue, i want to load data from api on after expansion. Is there any way to do this?