The useState Hook Examples

Making an avatar component

Let's say we want to display an image of a person that we have pulled from the internet. Most of the time, it will turn out to be a good picture (see the image below). However, sometimes, an image can be unavailable to download due to network or permission issues. When this happens, the browser throws a broken icon (the logo in the middle of the below image), which is not as nice to look at. The latest UX research shows that if we replace any broken image icons with something more unique (such as a user's name or initials, as shown on the right of the image below), this improves the user experience.