DEV Community: Anojan Thevarasa

ReactJS: prop-drilling and how to work-around it with useContext hook

Anojan Thevarasa — Tue, 09 Apr 2024 15:33:51 +0000

A traditional ReactJS application is built using components which represent a part of UI on the application. A component facilitates reusability of data in an application. When we have multiple components, we may have to use data like variables and functions repeatedly across these components. This calls for passing of such reusable data from one component to other and this is where "props" come into play.

Let's look at a very simple example:

function Greeting(props) {
  return <h1>Welcome to the city, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="Denis" />
      <Greeting name="Chris" />
      <Greeting name="Rajni" />
      <Greeting name="Deva" />
    </div>
  );
}

In the above example, a greeting text can be repeated for 4 different instances/names, using the props for name variable. The App function/component's variables are passed into the Greeting function/component using props.

Prop-Drilling

Passing data from one component to another has its own rules. Usually data can be passed from a parent to a child component using props. In most of the applications, these props may have to be passed from parent component to down the hierarchy across several child and grandchild components and so on. This results in a large number of nested components.

By default, props can be passed from a parent component only to the immediate next child component in the hierarchy. Suppose a child/grandchild component somewhere far down the line requires the props from the parent component, the props can't be passed directly but only by going through other child components in between, even if those middle child components don't require the props. This phenomenon is called prop-drilling which is obviously not the best coding practice.

Prop-drilling in ReactJS (source:react.dev docs)

useContext

There's a workaround for this prop-drilling in ReactJS. Most times, there may be a need for passing props from the parent component to some distant child component and not to the components in between. This is possible through the Context API in React, by using a hook called useContext.

In order to deploy Context for components, we need to first Create the Context using createContext, then wrap the child components using Context Provider and finally use the useContext hook from react library. Let's look at the structure of useContext step by step through a simple example where the DOM displays the game level in which a Player is:

First import the necessary hooks from react library

import { useState, createContext, useContext } from "react"

Then create a Context for the Level using createContext

const LevelContext = createContext()

Create the first Component for displaying a message when user is at Level 01. The first level is initiated using useState.

function Component1() {
  const [level, setLevel] = useState("Level 01")
  return (
    <LevelContext.Provider value={level}>
      <h1>{`You are in ${level}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}

Create rest of the components by hardcoding the level except for the last one which will use Context to take props from Level 01 parent component.

function Component2() {
  return (
    <>
      <h1>Level 02</h1>
      <Component3 />
    </>
  );
}
function Component3() {
  return (
    <>
      <h1>Level 03</h1>
      <Component4 />
    </>
  );
}

Finally the Component 4 will use props from Component 1 directly without involving the components in between

function Component4() {
  const level = useContext(LevelContext);

  return (
    <>
      <h1>Component 4</h1>
      <h1>{`You are at ${level} again!`}</h1>
    </>
  );
}

Here is the whole code altogether:

import { useState, createContext, useContext } from "react"

const LevelContext = createContext()

function Component1() {
  const [level, setLevel] = useState("Level 01")

  return (
    <LevelContext.Provider value={level}>
      <h1>{`You are in ${level}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}

function Component2() {
  return (
    <>
      <h1>Level 02</h1>
      <Component3 />
    </>
  );
}

function Component3() {
  return (
    <>
      <h1>Level 03</h1>
      <Component4 />
    </>
  );
}

function Component4() {
  const level = useContext(LevelContext);

  return (
    <>
      <h1>Component 4</h1>
      <h1>{`You are at ${level} again!`}</h1>
    </>
  );
}

The output for this is:

You are at Level 01! Level 02 Level 03 You are at Level 01 again!

Javascript: Function Declaration vs Function Expression

Anojan Thevarasa — Tue, 31 Oct 2023 14:13:03 +0000

Functions in Javascript are a block of code that execute an action/operation. Functions can take in parameters while being defined and later the parameters shall be passed as arguments while calling. There are, however, two ways in which a function is defined in Javascript based on when the particular function should be executed. One is called Function Declaration and the other way is Function Expressions. There are some differences in the defining and behaviour of the two methods.

Function Declaration
Function declaration is defining a function right off with the keyword "function" followed by function name, with or without parameters. The syntax for function declaration is:
function exampleFunction (param1,param2, etc){ //action to execute }

Here's an example function declaration that takes in two int values for parameters and returns the sum of them:

function addition(a,b){
  return sum = a + b
}

Function Expression
This is the way in which functions are defined and equaled(stored in) to a variable name usually with the keyword const. And later the variable name containing the function can be called. Syntax for a function expression is as follows:

const functionName = function(param1,param2,etc) { // action to execute }

The same example sum function from above can be defined in an expression as follows:

const addition = function(a,b){
  return sum = a + b
}

Major Difference
Both function declaration and function expression are used in Javascript and its frameworks based on some factors, the main of which is the time when a function has to be called for execution. By default, function declarations are hoisted, i.e. they take the top of the order of execution in a block of code irrespective of where they are defined. This way a function can be called either before or after it is defined.

On the other hand, a function expression is not hoisted. A function defined through expression is usually executed only in the order of where it is defined, in accordance with the synchronous nature of Javascript. Such a function can be called for execution only after it is defined and not before.

Different approaches to Conditional Rendering in React.js and when to use which!

Anojan Thevarasa — Thu, 21 Sep 2023 09:47:05 +0000

Conditional Rendering

Conditional rendering in React.js is all about using the conditional operators of Javascript to dynamically render something out to the ReactDOM if and only when a specific condition is met. The 2 main types of conditional operators used in React rendering are:

&& (the AND) operator
Ternary Operator

1. && (the AND) operator

The && operator checks for truthy or flasy (boolean) nature of an expression which can be taken advantage of for whether to render the given element or not. In other words, && operator can be used to determine to render something or not to render.
The syntax for the same would be:

condition && expressionToRender

For example, in order to render out a message when the number of messages meet a specific condition, it can be achieved as follows:

notifications.length > 0 && 
<h1>You have {notifications.length} notifications!</h1>

2. Ternary Operator

A ternary operator makes use of the truthy and falsy conditions existing in Javascript universe. The ternary operator can be substituted in place of the verbose "if else" and "switch" statements, if the options are just two. The syntax for a Ternary operator is:
condition ? expressionIfTrue : expressionIfFalse

If the condition is true, the first expression after '?' gets executed; and if it is false, the second expression after ':' is executed. So in simple terms, the ternary operator can be used to render one of the given 2 expressions.

For example, in the same situation as above, to render out either of 2 different messages based on the length of notifications:

 notifications.length === 0 ?
                <h1>You're all caught up!</h1> :
                <h1>You have {notifications.length} unread  
               notifications</h1>

In the above example, the message "You're all caught up!" (after "?") will be rendered out (displayed) if the notifications (stored in array) has 0 or no notification, which is checked using array.length method (before "?"). And if the notifications are 1 or more, the message in second h1 element (after ":") will be displayed (along with number of notifications derived with same array.method )

If Else and Switch statements

Though ternary operator can be used for more than 3 expressions as well, it's best practice to use if else or switch statements if the options are more than 2, to avoid complexity.

'Lists' in HTML

Anojan Thevarasa — Tue, 04 Oct 2022 19:39:27 +0000

While building a web page, there will be situations when we have to place a group of items next to each other. Just like conventional writing, a web page of text content may include paragraphs, media and lists. HTML has provisions for creating such lists with the aid of some elements. Firstly let's look at the various kinds of lists we could have.

Lists in HTML are of 3 types:

Unordered List
Ordered List
Description List

Unordered List
An Unordered List usually consists of related items that don't necessarily have to be in any particular order. An example can be a list of groceries or a list of travel essentials. Unordered lists in HTML are created using the ul tag. And each item of the list is created using the li tag. The list items by default take a bullet style.

Ordered List
An Ordered List usually consists of items that have to be in some particular order or hierarchy. An example would be a list of to do items or a recipe. Ordered lists in HTML are created using the ol tag. And same as unordered list, each item of the ordered list is also created using the li tag. The items in an ordered list by default are marked using numbers in increasing order.

Description List
The description list is a unique type of list which is used to display a list of terms followed by the description of those terms. In a Description List, the tag that denotes the list is dl. The name/term is created using dt tag and the description for the term is created using the dd tag.

Inline-Block in CSS

Anojan Thevarasa — Mon, 22 Aug 2022 10:50:19 +0000

Every HTML element is a piece of rectangle in CSS. When building a web page, the different elements will have to be displayed in various formats and sometimes have to be hidden too. This is where the Display property comes into play. There are 3 major Display properties Block, Inline & Inline-Block.

Block level elements by default take up the entire space of the row they are in, whatever width we provide or even if we don't provide a width at all. This way, multiple block level elements end up being placed one below other. The elements don't show up next to each other, even if there is available space.

Inline level elements align horizontally and next to each other in the same row, as long as there is space. However, it is to be noted that we can't provide a width or height to the inline elements like we can for block-level elements.

So what if we want to display elements next to each other and also have them adopt width and height that we provide? That is where Inline-block Display option proves to be handy.

Inline-Block

The inline-block property of Display takes the best of bothe worlds. With an inline-block display property we can have elements being placed next to each other in same row like inline elements do. And we can also provide width and height for the elements like we are able to do in a block-level element. So inline-block has been a widely used Display property, apart from the recent and most popular Flex property.