Chart refreshing twice - reactjs

Question

Chart created using react-chartjs-2 and chartjs is refreshing 2 times on changing values. For the first time, only the shape of the graph is changing and for the second time, the values on the y-axis and x-axis are changing.
const Chart = ({country}) => {
const [dailyData,setDailyData] = useState([]);
useEffect(() => {
const fetchAPI = async () => {
setDailyData(await fetchDailyData(country))
}
fetchAPI();
},[country]);
const {day,infected,recoveries,deaths} = dailyData;
const lineChart = (
infected? (<Line
data={{
labels: day.map((data ) => (data)),
datasets:[
{
data: infected.map((data) => (data)),
label: 'Infected',
borderColor: '#3333ff',
fill: true,
}],
}}
/> ) : null
)

Answer 1

There is an issue with your dailyData state.
You set the default value as an empty array but then later you try to destructure it as an object.
const asd=[1,2,4,5];
const {a,b,c}=asd;
console.log (a,b,c); // undefined, undefined, undefined
const [e,f,g]=asd;
console.log (e,f,g); // 1,2,4
However, you said your chart does work after the second flash. Meaning your original empty array is not the right default value for the useState hook. Should use null and check this before you destructure it.
UPDATE:
The chart could flash twice if the data is loaded twice too. useEffect should have an if statement checking if the data was loaded already and load only if it was not. Possibly you could add another state for loading. so you would not have two concurrent API calls.
Your code would look like this:
const Chart = ({country}) => {
const [dailyData,setDailyData] = useState(null);
useEffect(() => {
if(country && !dailyData){
const fetchAPI = async () => {
setDailyData(await fetchDailyData(country))
}
fetchAPI();
}
},[country]);
let lineChart=null
if (dailyData){
const {day,infected,recoveries,deaths} = dailyData;
lineChart = (<Line
data={{
labels: day.map((data ) => (data)),
datasets:[
{
data: infected.map((data) => (data)),
label: 'Infected',
borderColor: '#3333ff',
fill: true,
}],
}}
/> )
}
}