Should we render react component at multiple places? - reactjs

Question

So, i have component called Balance component which i want to display in navbar and on a page (summary page) component as well.
But i want to prevent it from making an api request twice.
The code of balanceSlice:
import {createSlice, createAsyncThunk} from '#reduxjs/toolkit';
export const updateBalance = createAsyncThunk(
'balance/fetchBalance',
async () => {
const response = await fetchBalance();
return response.data;
}
);
const initialState = {
value: 0
};
export const balanceSlice = createSlice({
name: 'balance',
initialState,
reducers: {
},
extraReducers: () => {...}
});
export const selectBalance = (state) => state.balance.value;
export default balanceSlice.reducer;
Here is the code of Balance
import {useState, useEffect} from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {updateBalance, selectBalance} from './balanceSlice';
function Balance() {
const balance = useSelector(selectBalance);
const dispatch = useDispatch();
useEffect(() => {
dispatch(updateBalance());
console.log('component ran')
}, [dispatch]);
return (
<>
{balance}
</>
);
}
export default Balance;
As i want to reuse this component at multiple places, so i haven't added any styling in this component. The styling is being done in summary page and the navbar. The updateBalance is requesting new balance from the api. I am using redux toolkit and I am trying to follow single responsibility principle and making component small, reusable and testable.
Is it recommended to render balance component at multiple places?
Navbar code:
import Balance from './../../features/balance/Balance';
function TopNavbar() {
return (
<Navbar>
<span className={styles.navbar__text__span}><Balance /></span>
</Navbar>
);
}
Similarly, i am importing Balance component in summaryPage component and rendering it. Is it a recommended approach or should i simply import selectBalance from balanceSlice and display it in navbar?

Answer 1

You can render Balance components wherever you need.
Balance component would look like this.
function Balance() {
const balance = useSelector(selectBalance);
const dispatch = useDispatch();
useEffect(() => {
if (balance.status === 'ready') {
dispatch(updateBalance());
}
console.log('component ran')
}, [dispatch]);
return (
<>
{balance.value ?? 0}
</>
);
}
In updateBalance action, you should set the balance status to 'fetching' and call the api. After api call is finished, you can set the balance status to 'fetched' and set the balance value to the fetched value. That's all I guess.