ShareSpot

1. CSS Grid: a. Introduction: - It is two dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. - Evolution: Table -> Float -> Flexbox (one-dimension) -> CSS Grid (two dimension) -  It is currently a  W3C Candidate Recommendation  despite already being adopted by most major browsers. b. Browser support: c. Terminology: Grid Container:   The element on which   display: grid || inline-grid   is applied. It's the direct parent of all the grid items. .grid-container  {   display :  grid ; } Grid Item :  The children (e.g.  direct  descendants) of the grid container. Here the  item elements are grid items, but  sub-item  isn't . Grid Line : The dividing lines that make up the structure of the grid. They can be either vertical ("column grid lines") or horizontal ("row grid lines") and ...

When to use Component or PureComponent I switched to using PureComponent awhile back on the premise of it being a more performant version of Component. This turned out to be true, but the performance gains come with a few strings attached. Let’s dig in to PureComponent and understand why we should be using it. Component and PureComponent have one difference PureComponent  is exactly the same as  Component  except that it handles the shouldComponentUpdate  method for you . When props or state changes,  PureComponent  will do a  shallow comparison  on both props and state.  Component  on the other hand won’t compare current props and state to next out of the box. Thus, the component will re-render by default whenever  shouldComponentUpdate  is called. Shallow Comparison 101 When comparing previous props and state to next, a shallow comparison will check that primitives have the same value (eg,  1 equals 1  or...

  Operand B     Undefined Null Number String Boolean Object Operand A Undefined true true false false false false Null true true false false false false Number false false A === B A === ToNumber(B) A === ToNumber(B) A == ToPrimitive(B) String false false ToNumber(A) === B A === B ToNumber(A) === ToNumber(B) A == ToPrimitive(B) Boolean false false ToNumber(A) === B ToNumber(A) === ToNumber(B) A === B ToNumber(A) == ToPrimitive(B) Object false false ToPrimitive(A) == B ToPrimitive(A) == B ToPrimitive(A) == ToNumber(B) A === B