Change props from child component — ReactJS

This article will address the question theoretically and practically — How to mutate(change) props in child components ?

What are props ? — props are nothing but objects which are used to pass data from one component to another.

A component cannot directly mutate it’s own props. If it does, this is called antipattern.
Anti-patterns are certain patterns that are considered bad programming practices. Design patterns are common practices we follow while developing an application, anti-patterns are opposite of Design patterns.

The data flows from top to bottom in React. …

Creating own reusable Custom Hook to be used by multiple functional components.

Hooks are nothing, but reusable methods. Hooks are nothing, but reusable methods with a state. Hooks are nothing, but reusable methods with a state, which helps in extracting complex component logic into methods.

Please follow this blog for basic details on hooks :

Traditionally in React, we’ve two popular ways to share stateful logic between components: render props and higher-order components.

Generally the name of the hooks starts from ‘use’, and it is advised to use the same naming convention, so that tools like eslint can find…

I was just having a normal, random conversation with one of my friends, a few days back where she sent me a note of 50 different thoughts summarized in a 2 liner. According to her, an 80 year old man had written a book where he was sharing his learnings of life in those 80 years, and she(my friend) did a good job of writing it down and sending me the pdf.

Keep a pen and paper beside you when you sleep, because a 2 billion dollar idea does not come after alerting you!

This was one of those learnings…

This article is about React Hooks! I just wanted to get a little creative with the title — sorry!

Hooks are a new addition in React 16.8. They let us use state and other important features like lifecycle methods without creating a class i.e. inside a function.

In one of my prod applications which is built on React we were using classes as React Components. With the POCs we did, it was clear to us that using a class based component generated a larger file size while building a deployable file in prod using webpack, when compared to using functional…

Before beginning, please create an AWS account, and get your access_key_id and secret_access_key. Also create a bucket named “test-dir-1313‘ and make sure to unselect block all permissions when creating s3 so that it has public access.

Below is the program to upload files from your local computer to AWS S3 bucket. I have added inline comments as well to make it easier for you to understand this!

We have made a directory in our local computer, which consists of all the files that needs to be uploaded. As we are uploading multiple files, if it is synchronous i.e. if it…

In this article we will focus on CompletableFuture which is a Java8 feature.

I will cover the basics about this feature in my next tech article. Until then you can refer to This is quite cool and covers all aspects !

We will discuss two problems here :

  1. Execute a new task ‘T2’ if the previous task ‘T1’ has completed executing. We will keep on polling the task ‘T1’ to check if task T1 is completed. Once T1 is complete, we will execute T2.

To give you a real life example :

Say that you are keeping a track…

Node.js is a server-side platform built on Google Chrome’s JavaScript Engine (V8 Engine). It is an event-driven single threaded, non-blocking IO, asynchronous programming language!

Check this video to understand the above architecture :

The video is pretty good, or I wouldn’t have had suggested!

You can skip it, or come back later to this video once you have gone through the basics.

Event loop -

The event loop allows Node.js to perform non-blocking I/O operations despite the fact that JavaScript is single-threaded. It is done by assigning operations to the operating system whenever and wherever possible.

Event loop is…

The JavaScript this keyword refers to the object it belongs to.

Alone, this refers to the global object.

In a function, this refers to the global object.

In a method, this refers to the owner object.

In a function, in strict mode, this is undefined.

In an event, this refers to the element that received the event.

Global Context :

this === window // returns true;

this === globalThis // returns true

Create a variable named ‘key’ globally. Create a simple function named ‘print’

var key = “value”function print() {    console.log(this.key)}print() // outputs "value"

Inside a function…

To know the basics of thread pools, and how can we create them, refer to my previous article.

I am going to keep this very simple — Hope this helps!

The number of threads while working in any Java application could be anything, if we are explicitly not creating thread pools and defining the number of threads in every thread pool.

There’s no defined number for a default thread pool for JVM. It’s actually the task of the OS to manage all processes and threads. A universal fact while working with threads which one might be aware of is that…

Threads allows a program to work parallelly on different tasks at the same time. In a single threaded application, only one thread can execute, meaning only one task can run at any point in time.

Examples :

Think of any server which can process multiple requests. Take a database server as an example, which can handle multiple requests concurrently. If a thread is created for every request made to the database server, then this database will spend more time in managing a thread rather than computing the business operations like executing sql. …

Vivek Singh

Full stack developer at Hitachi. Curious to learn new techs, and share them via blogs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store