What cause printing every array index twice time using map method. Does component is double rendered? Why it working like that?
import React from 'react';
const data = [
{ id: 1, name: 'john' },
{ id: 2, name: 'peter' },
{ id: 3, name: 'susan' },
{ id: 4, name: 'anna' },
];
const UseStateArray = () => {
const [people,setPeople] = React.useState(data)
return <>
{
people.map((person)=>{
console.log(person);
})
}
</>;
};
My output in console is:
{id: 1, name: "john"}
{id: 2, name: "peter"}
{id: 3, name: "susan"}
{id: 4, name: "anna"}
{id: 1, name: "john"}
{id: 2, name: "peter"}
{id: 3, name: "susan"}
{id: 4, name: "anna"}
<UseStateArray/>, gets rendered. Just dropping this code into a minimal example with an<App/>that only returns <UseStateArray/> shows things doing exactly what you'd expect, rendering only once. codesandbox.io/s/react-hooks-counter-demo-forked-rbtj6