In a reactJS app I have an array of hex values that is being reordered, apparently "on evaluation". When logged right after declaration the expanded values are listed in a different order to the unexpanded values. It's this expanded order that the app uses, but the unexpanded order (the declared order) that I expected.
Compare image to snippet, hopefully this is clear.
Btw, I know I can sort it and I know I can put the array directly in the component. I have already solved the problem by adding a key to the array. But I want to understand why it's happening.
const chartColours = [
'#003f5c',
'#f8b3df',
'#c4d94e',
'#8588b1',
'#496387',
'#2f4b7c',
'#c2b0d9',
'#665191',
'#a05195',
'#d45087',
'#f95d6a',
'#ff7c43',
'#ffa600',
'#fff18f',
'#fcc76b',
'#309975',
'#de425b'
];
console.log(chartColours);