📄 Table of Contents

  • Equality on Objects?

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Equality on objects

Two objects having the same properties and storing the same values are not equal.

{ char: 'A'} !== { char: 'A'}
//true

Detecting duplicates in arrays of objects

Let’s try out.

const arr = [{char: 'A'}, {char: 'A'}];
const set = new Set(arr);const hasDuplicates = set.size < arr.length;
console.log(hasDuplicates)
//false

It doesn’t work. As already said two objects storing the same values are not equal.

What can we do then?

We can, for example, transform an object into a JSON string. Two objects with the same properties and storing the same values will produce the same JSON string…


  • useEffectReact Hooks — Part 2

📄 Table of Contents

▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

A key difference between class and functional components is the fact that class components have a state (stateful) while functional components are stateless.

Stateless components do not use the “this” keyword.

Reminder: React first updates the DOM i.e., goes inside return statement, and then it calls any function that is passed into useEffect().


📄 Table of contents

  • how to pass props from PARENT to CHILD in CLass vs FUnctional components
  • Passing a function as a prop to a functional component
  • equivalent of forceUpdate() in reactHooks
  • props validation
  • difference between import {sthg…} vs import sthg…
  • template literals usage
  • how to submit form data
  • handle multiple form elements with SINGLE onChange Handler
  • toggle a ClassName
  • fetch from API via axios + hooks
  • form validations
  • how to format code using Prettier in visual code

◉ how to pass props from PARENT to CHILD in Class vs Functional components

In React, props stand for “properties” and they are the way we pass data from one React component to another.

React’s props are read-only. There is…


📄 Table of Contents

  • Redux Toolkit Introduction
  • comparision between createReducer over traditional Reducer approach
  • comparision between createAction over traditional actionCreator
  • createSlice() in RTK
  • Materialize vs Material UI
  • Theming in Material UI
  • Styling in Material UI (Styled-components)

▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Introduction

In actuality, Redux in its bare form is quite simple and easy to understand. But one of the most popular and enduring critiques is the amount of code Redux adds to the app, which many feel is unnecessary. …


Interview Questions?

Q. You might have a form created in your React App that user might try to close by closing the tab, reloading the page or close the browser directly without saving the data (or submitting the form). You might want to prompt the user in this case to alert them that there might be unsaved changes that might be lost.

How to do that in React ?

Answer @ https://inthetechpit.com/2020/05/19/prompt-user-with-beforeunload-on-browser-tab-close-react-app/

Q. You have a form…in one child component C1…you want to fetch only input type=”text” elements, in 2nd child component C2…you want to fetch only radio elements… in…


If you have built a React app at any point in your programming career, you probably have experienced an error at some point that was cryptic and did not provide any meaningful context on what actually happened.

That meant error occured at some point in the application and our React component did not handle the error gracefully.

A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.

try/catch only works for imperative code, but React components are declarative.

Since…


📄 Table of contents

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬✦✦✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Introduction

  • TypeScript has strict type checking.
  • TypeScript is object oriented JavaScript. TypeScript supports object-oriented programming features like interfaces, classes, etc.
  • TypeScript files(.ts) on compilation produce JavaScript files(.js) with the same name.

interface and type
Function overlaoading
OOPS Concept
Anonymous
undefined error
decode and encode URI
escape and un escape function'
unshift position in Java script
Screen Obects in Java Script
Event handlers in Java Script
Event bubbling
Redux v/s Flux
Components of Redux
What is redux
Role of reducer
Fragment - what is the signifance
Higher order Compoenent
Pure compoenent
Mounting, Unmount, Constructor
Render method on React
When it is invoked .. what result will it give - render
state and stateless components
Redux - what is it ? …

▬▬▬▬▬▬▬▬▬▬▬▬▬▬✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Action Type

An action type is a string that simply describes the type of an action. They’re commonly stored as constants or collected in enumerations to help reduce typos and because programmers love organization. I’ve found it helpful to structure my action types like this:

export const Actions = {  
GET_USER_DETAILS_REQUEST: 'GET_USER_DETAILS_REQUEST', GET_USER_DETAILS_SUCCESS: 'GET_USER_DETAILS_SUCCESS', GET_USER_DETAILS_FAILURE: 'GET_USER_DETAILS_FAILURE', UPDATE_USER_DETAILS_REQUEST: 'UPDATE_USER_DETAILS_REQUEST', UPDATE_USER_DETAILS_SUCCESS: 'UPDATE_USER_DETAILS_SUCCESS', UPDATE_USER_DETAILS_FAILURE: 'UPDATE_USER_DETAILS_FAILURE',
// more...
};

Action

An action is like a message that we send (i.e. dispatch) to our central Redux store. It can literally be anything. But ideally we want to stick to an agreed-upon pattern. …


📄 Table of Contents

▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬

◉ Closures

A Closure is a named or anonymous function defined within the context of an object or any other function, which preserves and access to the context where it was declared.

In JS, variables defined outside a function are automatically available inside the function (but NOT vice versa) because JS uses “Lexical Scoping” & it achieves so using Closures (or inner functions).

  • In JavaScript, all functions work like closures which literally means closures are created every time a function is created, at…

Anil Kumar

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

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