How to useState in react native? - react-native

Question

I am trying to use useState in React Native to store and display data but the array is displaying empty:
Here's my data which I am trying to store:
Array [
Object {
"text": "Dhananjay",
"time": 1610528730258,
},
Object {
"text": "Abhey",
"time": 1610529549681,
},
Object {
"text": "Himanshu",
"time": 1610529566017,
},
]
Below is my code:
const [list, setList] = useState([]);
useEffect(() => {
const items = firebase.database().ref("userName");
items.on("value", datasnap => {
//console.log(Object.values(datasnap.val()));
console.log(list);
setList([...list, {
id: Object.values(datasnap.val())
}
]);
console.log(list);
})
console.log(list);
}, []);

Answer 1

Firstly, useEffect in this instance will trigger your function anytime:
The functional component mounts, and
One of the dependencies specified in your array has changed between a subsequent re-render
Since you haven't specified any dependencies, the best way to check whether this is working is to instead render the contents of the list inside your component and observe whether the list has changed.
It is also worth noting that useState is asynchronous and you could consider using:
useEffect(() => { console.log(list)}, [list])
Alternatively, you could also try rendering the contents as well (although you've covered your bases above) with:
return (
<div>
{JSON.stringify(list)}
</div>
)
And see if the text appears in the component. If it doesn't chances are the on callback isn't firing here.