Midwest JS

Dustin Myers

Solving Real-Life Problems with React Suspense

In my talk, I will demonstrate how React Suspense for data fetching works, and how attendees can quickly implement it in order to easily build data fetching states in their projects. We will build an app that fetches data, and loads an image for each piece of data. I will discuss the UX implications of loading states in an application. We will then build react-cache from scratch with 7 lines of code to show attendees how it works, then use that implementation and React Suspense to delay component rendering until our data fetch is complete, and all our images are loaded. Talk outline - Self Introduction (1 minute) - Topic Introduction (3-5 minutes) - Demonstrate problem - Discuss what our solution will look like - Briefly discuss React Suspense and react-cache - Show project code starting point - Work on implementing the solution (20 minutes) - Wrap Suspense component around data fetching component - Implement react-cache library and demonstrate that delayed rendering now works - Rebuild react-cache step by step - Show new UX problem that occurs with image loading - Implement react-cache in a custom Image component - Demonstrate project solution - Conclusion (3-6 minutes)


About

React Instructor @LambdaSchool. Husband and father. Member LDS church. Just enjoying life. Opinions are mine, but sometimes I don't even agree with myself