Loading Components Conditionally on Mobiles, Tablets and Desktop in ReactJS

Written by | Published 2019/10/02
Tech Story Tags: reactjs | loading-components | conditional-loading | reactjs-loading | software-development | programming | coding | loading-reactjs

TLDRSometimes we are given a screen or PSD which have different layouts for mobile and desktop or for that matter even tablets and we need to render the layout with respect to device resolution. We know that we have been doing this from ages using media queries in CSS, but when it comes to ReactJS just hiding the element won’t do better. Because the components are still getting initialized, the lifecycle methods are getting invoked, rendering/re-rendering is not stopping and what not. Below is the example to demonstrate this, although its quite obvious but just to make a point.via the TL;DR App

no story

Published by HackerNoon on 2019/10/02