DEV Community: Vinay

Some of the React.

Vinay — Tue, 10 May 2022 05:19:02 +0000

Here are the some of the concepts and practices that I learnt while making my projects.

Batching
Reconciliation
Composition
React Router v6
CSS Modules
useRef Hook

Batching in React.

When I started using useState, I had a misconception that the component is rendered as soon as the setState statement is encountered. I realized this later that React does not render right after the setState statement. Any state update operations are batched together and queued to be computed when the useState is invoked during the next render. The component renders only when the event handler function has executed all the code that it had. Then, during the next render, those state updates that were batched are computed and the value is returned to the state variable. Thus, when the component renders and the hooks are invoked, they return the updated value to the state. Here is an example,

export default function App() {
  const [a, setA] = useState(1);

  const handleBtnClick = () => {
    setA(a + 1);
    setA(a + 1);
    setA(a + 1);
    setA(a + 1);
  };

  console.log("rendered", a);

  return (
    <div className="App">
      <button onClick={handleBtnClick}>do it</button>
    </div>
  );
}

If you run this, you will see that the console.log will run only once and give the value 2. If you have used React.StrictMode you might get the same output twice. Now, this example brings me to the next point which is the updater function.

In this example, since we are providing an operation inside setA, the setA is converted to setA(1+1) which is converted to setA(2) and then these updates are queued for the next render. Then, during the next render, useState has four state updates and all of them are setA(2). Why 2 for all of them? That is because every render has it's own state value and this state value does not change for that particular render. You might have noticed that in the line where useState(1) is invoked and we are de-structuring the array into the state value and state update function, we have used const. This means that we cannot change the state value during the same render. The previous render had the value of 1 for a. Therefore, all the setA statements were read as setA(2). The final value that is returned to the component is 2.

In case of a scenario where we want to serially update the state unlike the scenario mentioned above where the state was only replaced by the same constant value of 2 on every update, we would use an updater function.

An updater function is a callback function that is supplied to the setA. It's argument is the latest state value prior to this calculation. Here is an example,

const handleBtnClick = () => {
    setA((a) => a + 1); // this returns 2
    setA((a) => a + 1); // this returns 3
    setA((a) => a + 1); // this returns 4
    setA((a) => a + 1); // this returns 5
  };

By giving a callback function, we are telling React to calculate the state value during the next render.

Reconciliation

React uses this algorithm to make sure the DOM rendering is as efficient as possible. React has the diffing algorithm through which it narrows down which elements are different so that only those elements are updated in the browser DOM. This process starts with ReactDOM.render() method. This render method creates a virtual DOM. During diffing, the newly created virtual DOM is compared with the virtual DOM before the state update. But first, a bit about virtual DOM.

Virtual DOM is a JSON object that represents the browser DOM. It is extremely fast compared to the browser DOM. It is created from scratch on every state update.

How does React compare the corresponding elements from two different virtual DOMs? For that, let me show you this example,

console.log(
createElement(
<p className="App">some random text</p>
));

This code gives the following output,

React sees every node like this and then compares their respective properties. For any element to be called different, any of these properties have to differ from the properties of the same element of the previous virtual DOM.

All the child nodes are mentioned in children object. React gives warning for having unique keys for child nodes. Whenever React sees a different element, it not only re-creates that element but also all its children. So, having a unique key helps React in determining whether a particular child node is new or updated or removed from the list of children.

In a case without keys, adding a child on top of the list would mean that the whole list is destroyed and re-created. But having a key would tell the React to add the new element to the list instead of destroying the whole list.

One more thing. Think of the whole component tree in terms of a React Elements. The root component would have children where the child components would be listed and some of these would have children too. Continuing like this you can imagine a tree is forming that starts at the root and the leaf nodes are the HTML elements. This is the component tree that React is traversing during the diffing to spot the differences. To traverse this tree, React uses breadth first approach. To make a case for depth first traversal, let's say during diffing, React sees that a leaf node is different. So it destroys this node and creates it again. Now, it goes to the parent node and sees that this node is also different. It destroys this parent node and it's subtree and re-creates the whole subtree again. The same could have been done in a single operation had there been a breadth first traversal. React would first check the parent node instead of going directly to the child node.

Once the process of diffing is complete, React prepares a list of minimum updates required to be done on the browser DOM.

Composition

React uses the idea of function composition from JS. Components can be composed in a similar manner. Higher order component is one such function that takes the child component as an argument and returns this component wrapped in the parent component. What component is passed as an argument will change depending on the use case. Here is an example,

const FeedPageWrapper = PostsSection => {

    const FeedPage = () => {

        return (
            <div
                className={`bg-off-secondary ${styles.feedPageGrid}`}>
                <div className={`${styles.navDiv} flx flx-maj-end`}>
                    <NavBar />
                </div>
                <PostsSection /> {/*child component used here*/} 
                <div className={styles.extraDiv}>
                    {/* third div empty for now.*/}
                </div>
            </div>
        )
    }
    return FeedPage
}

export default FeedPageWrapper

In the above example, I have a higher order component that takes a component called PostsSection. This component that is passed as an argument will differ based on the page that the user is on. If the user is on bookmarks page, PostsSection will have a list of bookmarked posts. If the user is on user-feed page, PostsSection will have a list of posts personalized for the user.

Apart from the PostsSection, everything else on the page will be the same. Hence, I decided to use the higher order component here. Here is how this component will be used,

const BookmarksFeedPage = FeedPageWrapper(BookmarksSection)

export default BookmarksFeedPage

I have passed BookmarksSection as the argument and BookmarksFeedPage is returned that is exported in the next line. Similarly for the user-feed page,

const UserFeedPage = FeedPageWrapper(UserFeedSection)

export default UserFeedPage

Private routes using react router

By private routes I mean the routes that are personalized for the users and should only be shown if a user is logged in. For example, in an e-commerce app, wish-list and cart pages are the private routes because they will have different data for different users, unlike the products page.

Here is the algorithm,

Check if the current route is private or not.
If it is, then check whether the user is logged in or not.
If user is logged in, let the user continue with this route.
If user is not logged in, re-direct the user to the login page.
If the current route is not private, then let the user continue with this route.

<Route path={ROUTE_CART} element={
          <RequireAuth>
            <Cart />
          </RequireAuth>
} />

In the above code, I have wrapped <Cart/> inside <RequireAuth/> which checks whether the user is logged in or not.

const RequireAuth = ({ children }) => {
        const location = useLocation()
        return isUserLoggedIn ? children : <Navigate to='/login' state={{ from: location }} replace />
    }

The above code shows that user's log in status is maintained in the state isUserLoggedIn. <Navigate/>
is a component in react-router@6 which takes a parameter to to navigate to a particular location.
The user's current location is also saved inside the state of Navigate so that after log in, user can be redirected to this location. Here is the code for that,

const from = location.state?.from?.pathname
navigate(from, { replace: true })

Setting replace to true means that the login page would be removed from the history stack of the browser. This is helpful when the user presses the back button, the app skips the login page and goes to page that was opened previous to the login page.

CSS Modules

Initially I had used normal CSS stylesheets in my projects. This was raising specificity conflicts because every stylesheet had a global scope. CSS modules resolved this issue because it limits the scope of stylesheet to the file that it is imported in.

useRef

I have used useRef in one of my apps to make DOM manipulations. The requirement was that whenever a user clicks on any option from the given options, the app should change the background color of that option to red or green depending upon whether the answer was correct or wrong. Here is the first part of logic,

optionBtnRefs.current = currentQues?.options?.map((option, i) => optionBtnRefs[i] ?? createRef())

This code is creating an array of refs for each option of the question. Then,

<button key={index} ref={optionBtnRefs.current[index]} onClick={() => handleOptionSelect(optionBtnRefs.current[index])} value={option}>{option}</button>

When mapping over the options, I have assigned a ref to each option and the same ref is passed to onClick event handler. Then,

if (ref.current.value === currentQues.answer) {
            ref.current.style.background = 'var(--clr-success)'
            setTimeout(() => { ref.current.style.background = 'var(--clr-primary)'; setScore(s => s + 1) }, 1000)

        } else {
            ref.current.style.background = 'var(--clr-error)'
            setTimeout(() => ref.current.style.background = 'var(--clr-primary)', 1000)
        }

Depending upon whether the chosen option is the correct answer or not, I have updated the background of that particular ref. The background is restored to normal after 1 second.

These were some of the things I wanted to share. Hope it helps. Thanks for reading.

Some of the JS.

Vinay — Sat, 07 May 2022 11:10:19 +0000

In this blog I'll be sharing some of the JS concepts that I've learnt and used till now.

Single threaded JS.
JS engine and the browser.
ECMAScript.
A little bit about Date.
How JS executes.
Closures.
Async-await.
Some quotes from Eloquent JS.

JS is single threaded.

JS is single threaded. It only has one call stack. It does not have multiple threads. It uses the environment that it is running in to deal with the asynchronous tasks. For web apps, it uses the browser APIs to execute the sync/async tasks. Here is the list of browser APIs, in case you want to know about them.

JS engine and browser.

Most popular JS engine is Chrome V8 and along with Chrome browser, it's also used by NodeJS. A JS engine provides everything that is specified in ECMAScript standard. Out of all these, memory heap and call stack will be the focus of this blog. Memory heap is used for the space allocation and call stack is used for executing the code. We'll go in detail about the execution steps later. So in summary, the JS engine provides the runtime environment for JS to execute. The engine is independent of the browser but it collaborates with it.

ECMAScript

Initially, I was a bit confused about the differences and would use this name interchangeably with javascript. These are the two different entities. JavaScript is the language that follows a standard called ECMAScript. This is the standard that any language has to follow to be called an ECMASCript language. JScript is another language that follows this specification. The standards are specified in the document called ECMA 262. These standards are decided by a group called TC39. This group has programmers, academics and many others who have a major contribution in deciding the course of this specification called ECMAScript. You can read more about this here

A little bit about Date

JS has provided the date object and its methods which can be used to manipulate dates in our app. Out of those, there is a method called getDate() which returns the date. There have been times when I was required the number of days of a month. It can be done by using

new Date(2022,month,0).getDate()

0 here tells JS to give number of days of month previous to what we have specified. month here is a digit and months are 0 indexed in JS. So if I want to check number of days in Feb 2022, i call it like

new Date(2022,2,0).getDate()

Here 2 works because I want month previous to March. So when you read it, it aligns with our notion of addressing months as 1-indexed. Hence, its easier to remember.

How JS executes.

Now, how does JS execute in the browser. JS is an interpreted language. This does not mean it does not get compiled. It gets compiled during the runtime unlike languages like C++ that are compiled well before execution. This Just in Time compilation is done by the JS engine. Apart from this, browser provides APIs like DOM, AJAX etc. You might not know this but console is also an API and it is not part of JS. In case of console object, it's easier to understand the program flow because it is not an async API. But what happens when an async task is performed. Let's say we have an async task of fetching some data and we are using fetch API.

fetch("https://rickandmortyapi.com/api/character?page=1", {
  method: "GET"
})
  .then((res) => res.json()) //callback function to convert response stream to JSON 
  .then((data) => console.log(data.results));

Browser fetches the data from the url specified and the callback function that was specified is then pushed to the microtask queue to be executed by the call stack. Event loop is what takes care of providing these tasks back to the call stack from the queue. As soon as the call stack is empty or it only has global context (we'll talk about execution context later), event loop pops that callback function from the queue and pushes it in the stack. Now, there is one more queue called event queue which has a lower priority than microtask queue. Any task that uses a promise based API like fetch, is pushed in the microtask queue and any other async task like setTimeout is pushed to event queue. In a case where both the queues have a task waiting to be pushed in the stack, priority is given to microtask queue. After this, call stack executes the callback function and the execution continues.

Now, to go in the details, the JS executes in two phases. First is the memory allocation phase and the second is code execution phase. Before going in details of these phases, I would like to tell you about execution context, scope and lexical environment. We talked about call stack before, that executes the code. But what exactly does the element of that stack represent? It's not lines of code, it is execution context. At the bottom of the call stack or the first element inside the call stack is the global execution context. This is because every program starts from the global scope. Every time a function is created, a separate execution context is created for that function and this context is pushed on top of the stack. This execution context is popped from the stack as soon as the code within that function is done executing.

Lexical environment takes care of the mapping of variables with their references. This is called variable-identifier mapping. Identifier is the name of the variable and variable is the actual reference. So, every execution context has it's lexical environment. When the execution context is popped from the call stack, the lexical environment of that context is not disposed. It stays in the memory for any future use. For example, lets take a scenario of enclosing functions.

function outerFunc() {
  let a = "a";
  function innerFunc() {
    let b = 'b'
    console.log(a,b);
  }
  innerFunc();
}
outerFunc();

Here, the outer and inner functions will have their own respective contexts and lexical environments. The lexical environment of the inner function will not only keep account of variables in it's scope but also keep a reference to the parent environment which in this case is the outer function. That is how we can use variable that belongs to the outer function. This part might have reminded you about the closures.

Scope literally means the 'extent'. Thinking from the perspective of programming, it can be the extent to which a particular statement is impacting/affecting the program or the extent to which a particular variable can be utilized.

Closures

Now about the closures. If you remember, lexical environment remembers it's parent lexical environment. This way you can imagine a chain of these environments that is formed where every enclosed environment holds a reference to it's respective parent environment until we reach the global lexical environment. This chain is what enables the enclosed function to use bindings from the enclosing function, way after that enclosing function was invoked. This is called closure. Here is an example,

function outerFunc() {
  let a = "a";
  return function() {
    let b = "b";
    console.log(a, b);
  };
}
outerFunc()();

Now that these terminologies are clear. Let's resume with phases of execution. In the first phase, lexical environments are initialized. This is the stage where variables and functions are hoisted. In this second phase, the thread of execution starts.

Async-await

When I started using async await syntax, I was under the impression that the program literally halted at the await statement and resumed the execution when the promise was settled. I realized that this is not how it works. Here is an example,

function first() {
  return new Promise((res) => {
    console.log(2);
    res(3); /* promise resolved */
    console.log(4);
  });
}

async function f() {
  console.log(1);
  let p = await first();
  console.log(5);
  console.log(p); /* resolved promise */
}

console.log("a");
f();
console.log("b");

Guess the output for this program. If you thought the output would be a 1 2 4 5 3 b, then you need to know this one thing about async-await. The program doesn't halt and wait for the promise to be settled. Instead, await statement and anything that is after the await statement in that particular scope, is moved from the call stack to the microtask queue to be pushed back again to the call stack, once the promise has settled. In this case, console.log(5) and console.log(p) is moved and program resumes execution from console.log('b') in the global scope. Once this is completed, the call stack gets emptied and those statements are pushed to the stack to be executed. So, the order of the execution will be a 1 2 4 b 5 3.

Some quotes from Eloquent JS

"Being able to refer to an instance of a local binding from an enclosing scope is closure."
"Function remembers the environment it is created in, not the one it is invoked in."
"A function parameter is a local binding by itself."
"Pure function not only avoids causing side effects but also avoids relying on side effects caused by other functions."

This was all I wanted to share for now, hope it helps. Thanks for reading.

Some of the CSS.

Vinay — Tue, 03 May 2022 14:09:48 +0000

Here is an account of some of the CSS concepts that I got to learn till now.

Z-index
Stacking context
Stacking order
Overflow & sticky
Holy grail layout

z-index

z-index is a property that is used to add another dimension to the app, as the name suggests - (z). The viewport has width and the height but z-index gives it a sense of depth.

For length, we have relative as well as absolute units - px that can define how many pixels should the length cover but in case of depth it is impossible to define it in terms of pixels, for obvious reasons, so we define it relatively. Relative here means relative to each other i.e, whether we want a particular element to be above or below the other element.

This relation is defined by assigning absolute digit as a value to the z-index property. Even though these digits are absolute, they are used relative to each other. But what exactly do I mean by each other.

Stacking context

Here comes the concept of stacking context. What is stacking context? Upon bifurcating the words, we get stacking and context. Stacking means placing things on top of other things (you must have used stack as a data structure) and context is a particular setting or an environment. We can create several stacks of HTML elements on the same page, each of them having their own context. The z-index of an element would hold its meaning or value only in the context that this particular element is in. Here is the code to get a clearer picture.

<body>
    <div id="parent1"></div>
    <div id="parent2"></div>
</body>

/* for now, focus only on z-index */

#parent1 {
  position: absolute;
  z-index: 1;
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

#parent2 {
  position: absolute;
  z-index: 2;
  top: 100px;
  width: 200px;
  height: 200px;
  background-color: lightcoral;
}

As it can be seen, I have created a stacking context inside body with parent1 and parent2 as two child nodes. Their respective z-index give us the outcome where parent2 is overlapping parent1.

Now let's create another stacking context, nested inside parent2.

<div id="parent1"></div>
<div id="parent2">
  <div id="child1"></div>
  <div id="child2"></div>
</div>

#parent2 > #child1 {
  position: absolute;
  top: 0;
  z-index: -1; /* negative z-index */
  width: 50px;
  height: 50px;
  background-color: lightgreen;
}

/* no z-index */
#parent2 > #child2 {
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  background-color: lightyellow;
}

Here you see only child2 because z-index of child1 is -1. Now, seeing only the code you might think that because of negative z-index, child1 will be at the bottom of all elements but it does not go below parent2 because -1 only has any meaning inside the stacking context of parent2.

Stacking order

Stacking order is the order in which the elements are placed in a context. As you saw in the above example, browser determined the order of elements based on their z-index.

One rule is important to get a better grasp on stacking order. Going from the bottom to top, this is how elements are stacked( excluding the float elements which deserve a separate blog). Positioned element with negative z-index, un-positioned element, positioned element with no z-index and positioned element with positive z-index.

/* unpositioned element */
div#one {
  background-color: lightblue;
}

/* positioned with -ve z-index */
div#two {
  position: absolute;
  top: 15px;
  z-index: -1;
  background-color: lightcoral;
}

/* positioned with no z-index */
div#three {
  position: absolute;
  top: 0px;
  background-color: lightgreen;
}

/* positioned with +ve z-index */
div#four {
  position: absolute;
  top: -10px;
  z-index: 1;
  background-color: lightgrey;
}

Overflow and sticky

Here is the scenario,

<div id="app">
      <div id="menu">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>

#menu {
  height: 200px;
  width: 200px;
  position: sticky;
  top: 0;
  overflow-y: auto;
  background-color: lightgreen;
}

Expected behavior is that the menu should stick to the top of page when top: 0. But here, it does not. I had faced this issue when I was creating a side menu. The first thing I had realized was that for overflow to work I needed to give it a height. The second realization was that sticky and overflow cannot go together on the same element.

Now, I change one thing.

#app {
  position: sticky; /*sticky moved to parent element*/
  top: 0;
}

#menu {
  height: 200px;
  width: 200px;
  overflow-y: auto;
  background-color: lightgreen;
}

I have given the sticky position to menu's parent and now it works just fine.

Holy grail layout

This layout has header, main content, aside and footer. One way to achieve this layout using grids is to divide the page in certain columns and rows using grid-template-columns or grid-template-rows. Then, for each of the above mentioned elements, we assign them a cell or an area using grid-column-start and grid-column-end and similarly for rows.

To make it responsive, we'll have to change their cells/area positions in the grid using the same properties mentioned before.

An alternative to this is grid areas. Firstly, here is how the layout looks.

On smaller screens, it changes to this.

Now, let's look at the code.

<body>
    <header></header>
    <aside id="left"></aside>
    <aside id="right"></aside>
    <main></main>
    <footer></footer>
</body>

body {
  display: grid;
  grid-template-areas:
    "header header header"
    "aleft main aright"
    "footer footer footer";
/*no. of strings defines the rows and no. of words 
in each string defines the columns*/
  height: 100vh;
}

header {
  grid-area: header;
  background-color: lightpink;
}

aside#left {
  grid-area: aleft;
  background-color: lightgreen;
}

main {
  grid-area: main;
  background-color: lightyellow;
}

aside#right {
  grid-area: aright;
  background-color: lightgreen;
}

footer {
  grid-area: footer;
  background-color: lightblue;
}

grid-template-areas is the property which accepts a set of strings. This set of strings represent the blueprint of the layout.

The words present in these strings are to be defined as the value of grid-area property for the respective child elements. For example, in the code you can see header is the grid-area for <header></header>element.

Now, to add responsiveness, all i have to do is change the strings defined in grid-template-areas. Here's the code.

body {
    grid-template-areas:
      "header"
      "aleft"
      "main"
      "aright"
      "footer";
  }

These were some of the things that I wanted to share with you all. Hope it helps. Thanks for reading.