I'm using the map function in React to render a list of users—user name, picture, and other details—along with a button to delete or add users. User image source is usually in the form of base64, so it is not from the same JSON object but from a separate function.
The problem is whenever I add or remove the user function removeThis, the function getImageUrl also runs for all objects.
Here is the code sample
const List = (props) => {
const [person, setPerson] = useState(people);
/* remove person */
const removeThis = (thisPerson) => {
setPerson(person.filter((tp) => tp != thisPerson));
};
/* get image */
function getImageUrl(person) {
console.log(person.id, "this should not run on every loop");
return "/" + person.imageId + "s.jpg";
}
/* list map */
const listItems = person.map((person) => (
<li key={person.id}>
<img src={getImageUrl(person)} alt={person.name} />
<p>
<b>{person.name}</b>
{" " + person.profession + " "}
known for {person.accomplishment}
</p>
<button onClick={() => removeThis(person)}>Delete</button>
</li>
));
/* result */
return (
<>
<ul>{listItems}</ul>
</>
);
};
I tried memo and few other options but none worked. I could also use js way(instead of react map, just manupulate html dom), but i choose to avoid it. Here is the sandbox url
I'm using the map function in React to render a list of users—user name, picture, and other details—along with a button to delete or add users. User image source is usually in the form of base64, so it is not from the same JSON object but from a separate function.
The problem is whenever I add or remove the user function removeThis, the function getImageUrl also runs for all objects.
Here is the code sample
const List = (props) => {
const [person, setPerson] = useState(people);
/* remove person */
const removeThis = (thisPerson) => {
setPerson(person.filter((tp) => tp != thisPerson));
};
/* get image */
function getImageUrl(person) {
console.log(person.id, "this should not run on every loop");
return "https://i.imgur/" + person.imageId + "s.jpg";
}
/* list map */
const listItems = person.map((person) => (
<li key={person.id}>
<img src={getImageUrl(person)} alt={person.name} />
<p>
<b>{person.name}</b>
{" " + person.profession + " "}
known for {person.accomplishment}
</p>
<button onClick={() => removeThis(person)}>Delete</button>
</li>
));
/* result */
return (
<>
<ul>{listItems}</ul>
</>
);
};
I tried memo and few other options but none worked. I could also use js way(instead of react map, just manupulate html dom), but i choose to avoid it. Here is the sandbox url
Share Improve this question edited 20 hours ago Drew Reese 204k18 gold badges244 silver badges273 bronze badges asked yesterday NeoNeo 311 silver badge4 bronze badges 5 |3 Answers
Reset to default 2You can separate the listItems to a new component and useMemo the url
const ListItem = ({ person, removeThis }) => {
const src = useMemo(() => {
console.log(person.id, "this should not run on every loop");
return "https://i.imgur/" + person.imageId + "s.jpg";
}, [person])
return (
<li>
<img src={src} alt={person.name} />
<p>
<b>{person.name}</b>
{" " + person.profession + " "}
known for {person.accomplishment}
</p>
<button onClick={() => removeThis(person)}>Delete</button>
</li>
);
};
const List = (props) => {
const [person, setPerson] = useState(people);
/* remove person */
const removeThis = (thisPerson) => {
setPerson(person.filter((tp) => tp != thisPerson));
};
/* list map */
const listItems = person.map((person) => (
<ListItem key={person.id} person={person} removeThis={removeThis} />
));
/* result */
return (
<>
<ul>{listItems}</ul>
</>
);
};
getImageUrl is called once for each array element each time the List component rerenders because it invoked directly during the render cycle when setting the img element's src prop.
<img
src={getImageUrl(person)} // <-- invoked every render cycle
alt={person.name}
/>
If you don't want getImageUrl to be called this often then I suggest incorporating the image source URL into the people/person state value so it's computed once when the state is created. This can be done when initializing the state.
Suggestions:
- Map the
peoplearray to a new array with a new computedimageSrcvalue. - Move
getImageUrloutside the React component so that it is a stable reference, e.g. not unnecessarily redeclared each render cycle. - Use the
person.idproperty to compare (using strict equality, i.e.===) the two people objects when filtering out values from thepersonstate. - Use a functional state update to update the
personarray. This avoids any stale closures over the state value you are updating from, and correctly ensures you are updating from the current state value. - To avoid confusion
peopleshould be renamed to something else, and thepersonstate renamed topeopleso readers of your code better understand what the state value represents. It's a bit odd to have an array of people/persons namedperson.
Example Update:
const getImageUrl = (person) => `https://i.imgur/${person.imageId}s.jpg`;
const List = (props) => {
const [people, setPeople] = useState(
() => peopleExternal.map(person => ({
...person,
imageSrc: getImageUrl(person),
})),
);
/* remove person */
const removeThis = (thisPerson) => {
setPeople(
people => people.filter((person) => person.id !== thisPerson.id)
);
};
/* list map */
const listItems = people.map((person) => (
<li key={person.id}>
<img src={person.imageSrc} alt={person.name} />
<p>
<b>{person.name}</b>
{" " + person.profession + " "}
known for {person.accomplishment}
</p>
<button onClick={() => removeThis(person)}>Delete</button>
</li>
));
/* result */
return <ul>{listItems}</ul>;
};
Or since computing the image URL is so trivial, just do it directly inline when rendering, avoiding the function call entirely.
const List = (props) => {
const [people, setPeople] = useState(peopleExternal);
/* remove person */
const removeThis = (thisPerson) => {
setPeople(
people => people.filter((person) => person.id !== thisPerson.id)
);
};
/* list map */
const listItems = people.map((person) => (
<li key={person.id}>
<img
src={`https://i.imgur/${person.imageId}s.jpg`}
alt={person.name}
/>
<p>
<b>{person.name}</b>
{" " + person.profession + " "}
known for {person.accomplishment}
</p>
<button onClick={() => removeThis(person)}>Delete</button>
</li>
));
/* result */
return <ul>{listItems}</ul>;
};
You can move the function declarations outside the component
function getImageUrl(person) {
console.log(person.id, "this should not run on every loop");
return "https://i.imgur/" + person.imageId + "s.jpg";
}
const List = (props) => {
const [person, setPerson] = useState(people);
/* remove person */
const removeThis = (thisPerson) => {
setPerson(person.filter((tp) => tp != thisPerson));
};
/* list map */
const listItems = person.map((person) => (
<li key={person.id}>
<img src={getImageUrl(person)} alt={person.name} />
<p>
<b>{person.name}</b>
{" " + person.profession + " "}
known for {person.accomplishment}
</p>
<button onClick={() => removeThis(person)}>Delete</button>
</li>
));
/* result */
return (
<>
<ul>{listItems}</ul>
</>
);
};
src={getImageUrl(person)}does each time eachpersondata is rendered into a list item? This is normal Javascript behavior for how you've coded the logic. Is there any actual issue or problem here when this happens? – Drew Reese Commented 20 hours agogetImageUrlis called once for each array element each time the array is rendered. What ispeoplein your code snippet? Can you edit to include a more complete minimal reproducible example? – Drew Reese Commented 11 hours ago