Improve Your UX by Dynamically Rendering Images via React

It’s a competitive world out there right now. As we all know, just having a good idea isn’t enough to make a company the next billion dollar IPO. Execution is just as important, and when it comes to product, that boils down to one factor — . User Experience User Experience is a lot more than how our product looks aesthetically. It’s also how performant it is, how intuitive it is — how much it our users. delights We’ve all been there, discovering a new app or web page for the first time and seeing something like this: With high resolution photos and retina screens, it’s all too often we have to sit and watch images painstakingly render. It’s a common sight to see an image slowly rendering from top to bottom. This problem can be solved. The first 2 obvious optimizations are to use a CDN and utilize caching (your browser automatically does this) to make images load faster. However, we can also our user’s perception of load time which results in an overall positive increase in user experience. trick Here are 2 tricks we can use to improve our UX on media-rich apps: 1. Use a placeholder: use a placeholder to indicate media is loading A placeholder is modern twist on the classic loading spinner. Rather than a generic spinner to indicate the app is loading, we use a placeholder that communicates to the user what type of content is loading — images. and are both good examples that use this technique to improve their UX. Facebook LinkedIn 2. Dynamically adding images to the DOM: The second optimization is to fully download our images before showing them on the screen. This will avoid the classic top-to-bottom rendering we’re used to seeing for images as they’re being downloaded. We accomplish this by using React’s event; we can make the request to the server for the image files, but not render the image in the DOM until the entire file has been downloaded. [onLoad](https://facebook.github.io/react/docs/events.html#image-events) the end result: smooth as butter The end result is an app that loads high resolution images and never keeps the user waiting. The placeholder the user and lets them know images are being loaded. Furthermore, we hold off on rendering the images until they have been fully downloaded from the server so our user never has to see images painting from top to bottom in the browser. teases view live demo Show Me the Code! Rendering the Placeholder For our placeholder component ( in this example), we simply render the image and apply any animation effects we want: LoadingItem export default function () {return ( )} In the render of our Feed component, we simply render as long as we still have being loaded: LoadingItem FeedItems export default class Feed extends Component { ... render() {return ( ... {this.props.items.length > this.state.loadedItems.length && } ... ) }} Dynamically Rendering Images via `onLoad` Our component works as follows: Feed export default class Feed extends Component {constructor(props) {super(props)this.state = { loadedItems: [] }} onLoad(feedItem) {this.setState(({ loadedItems }) => {return { loadedItems: loadedItems.concat(feedItem) }})} render() {return ( {this.props.name} {this.state.loadedItems.map((item, i) => )}{this.props.items.length > this.state.loadedItems.length && } {this.props.items.map((item, i) => )} )}} So what’s happening here? We have a hidden at the bottom that is responsible for downloading the image files. When the file is finished downloading, the event will trigger, which updates the newly loaded item in the state. When the state updates, the newly loaded item is rendered into the DOM with the image already fully downloaded. onLoad That’s it! View live demo (star the repo if you found this helpful!) View full source code