I'm trying to reverse an array of objects that I import from a js file. Right now it only works when I put the array straight in my component where I want to display that data, not when I import it from another file. I can't figure out what the issue is, please let me know if I need to provide some additional information!
I have data constructed like this in a js file:
const projects = [
{
id: 1,
title: "React Tv-show App",
url: "url",
image: "image",
},
{
id: 2,
title: "React Landing Page",
url: "url",
image: "image",
},
etc..]
export default projects;
My component where I want to display and reverse that data looks like this:
import data from "./projects";
export default function ProjectsView() {
const projects = data.reverse();
return (
<div className="projectsView">
<h1 className="projectsTitle">Projects</h1>
<div className="projectsRow">
{projects.map((project) => {
return (
<Project
key={project.id}
title={project.title}
url={project.url}
image={project.image}
/>
);
})}
</div>
</div>
);
}
I also tried projects.reverse().map() in the render but that didn't work either.
The result is not as intended because reverse() reverses the array in place. Meaning that it does not create a reversed copy, but reverses the receiver (array on which you call the method). So data is reversed for every render that is done.
If you call reverse() twice you'll end up with the original order. So the amount of renders determines the order. If the component is rendered an odd number of times the array is reversed, if rendered an even number of times the array will have the original order.
To prevent this from happening you should not mutated the original array, but instead created a reversed copy. This would mean changing the following:
const projects = data.reverse();
Should be:
const projects = Array.from(data).reverse();
This first creates a shallow copy, which is then reversed. Since you never change/mutate data, each render will produce the same output—regardless of how many times it is called.
The useMemo hook can also be used for increased performance.
const projects = useMemo(() => Array.from(data).reverse(), [data]);
This will re-use the Array.from(data).reverse() result as long as data stays the same. Without the useMemo hook, a reversed copy has to be made for every render that is done.
array.reverse() reverses an array in-place, so your array is being reversed on every render.
Use const projects = [...data].reverse(); instead. This will create a new array instead of mutating your existing array.