DEV Community: cpcjain

React Hooks Crash Course

cpcjain — Mon, 07 Aug 2023 04:49:56 +0000

React Hooks

useEffect is use to handle component side effects. Generally used in fetching data, subscribing to events or updating title. The first argument is an callback function that contains the effect we want to run and callback will be called after the component is rendered.

import { useEffect, useState } from 'react';

function MyComponent({ id }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(`https://my-api.com/data/${id}`)
      .then(response => response.json())
      .then(data => setData(data));
  }, [id]);

  return (
    <div>
      {data ? <p>Data: {data}</p> : <p>Loading...</p>}
    </div>
  );
}

useState is a hook that allows you to add state to a functional component in React. State is a way to store and manage data that can change over time. It allows you to keep track of data that your component needs to render, such as a value entered in an input field or a toggle state.

import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useState returns an array containing two elements, the first one is the current state, and the second one is a function that allows you to update the state.

useMemo is used to memoize a value that's expensive to calculate. It takes a function that returns a value and an array of dependencies as arguments. It will only recalculate the value when one or more of the dependencies have changed. The value is then passed as a prop to a child component, and the child component only re-renders when the value changes.

import { useMemo } from 'react';

function MyComponent({data}) {
  const memoizedData = useMemo(() => expensiveCalculation(data), [data]);

  return (
    <div>
      <p>Data: {memoizedData}</p>
    </div>
  );
}

useCallback is used to memoize a callback function. It takes a callback function and an array of dependencies as arguments. It will return a new callback function only when one or more of the dependencies have changed. The callback function is then passed as a prop to a child component, and the child component only re-renders when the callback function changes.

import { useCallback } from 'react';

function MyParentComponent({data}) {
  const handleClick = useCallback(() => {
    console.log(data);
  }, [data]);

  return (
    <div>
      <MyChildComponent onClick={handleClick} />
    </div>
  );
}

In summary, useMemo is used to memoize a value and useCallback is used to memoize a function. Both are used to make your component more performant by avoiding unnecessary calculations or re-renders.
useReducer is a hook that allows you to manage state in a functional component using the concept of a "reducer" function. It's similar to useState, but it is more powerful and flexible, and is better suited for handling complex state updates. The useReducer hook takes two arguments, the first one is the reducer function, and the second one is the initial state. It returns an array containing the current state and a dispatch function that allows you to update the state by dispatching an action.

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

memo takes a component as its first argument, and an optional compare function as a second argument. The compare function is used to determine if the component should re-render based on the props. If no compare function is provided, memo will use a shallow comparison of the props to determine if the component should re-render.
useRef allows you to create a reference to an element or a value in a functional component. It's a way to store a reference to an element or a value that persists between renders.

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
    </div>
  );
}

In summary, useState is used to manage state in a component and useRef is used to create a reference to an element or a value in a component.
useState is useful when you need to keep track of a value that can change over time, and you want the component to re-render when that value changes. useRef is useful when you need to access or manipulate an element in the DOM, or if you need to keep track of a value that should persist between renders but does not need to cause a re-render.
createContext is an API in React that allows you to create a context, which is a way to share data between components. It allows you to pass data down through a component tree without having to pass props down manually at every level. context refers to a way to share data between components without having to pass props down manually at every level of the component tree.

When shouldn't you use the Context API?

Everything that consumes a context re-renders every time that context’s state changes. That means that if you’re consuming your context all over the place in your app, or worse, using one context for your entire app’s state, you’re causing a ton of re-renders all over the place

What is a Fragment?

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

What is a portal?

A portal is a way to render children in a dom node that exists outside the dom hierachy of the parent component and it can live anywhere in the dom tree and you most often in ui components like modal.

What are uncontrolled and controlled components?

A controlled component in React is when the component's state directly controls the value of form elements. Changes to the form elements are managed through React's event handlers. Uncontrolled are input values which are typically controlled by users and react does not control.

This article is published w/ Scattr ↗️

Exploring the Mystery of Inequality: Why Two Empty Arrays or Objects in JavaScript are Not Equal

cpcjain — Wed, 08 Mar 2023 04:13:59 +0000

In JavaScript, data can be passed either by value or reference. The data type passed as a value is called primitive type while the data type passed as a reference can be collectively called Objects.

Primitive values are stored directly in the variable, and when the variable is assigned a new value, the old value is overwritten. Think of the variables as having no relationship to each other.

let x = 5;
let y = x;
x = 10;
console.log(y);  // prints 5

When a variable is assigned a non-primitive value, such as an object or array, it is given a reference to that value instead of the value itself. This reference points to the location in memory where the object is stored, and the variable does not contain the object's value directly.

When a variable, let arr = [], is assigned the object, it receives the address or location of that object in memory, rather than the object itself. This means that the variable holds a reference to the object rather than containing the object's value directly.

Let's clear it out with examples

In the above example, we have two variables a and b that are assigned to the same object, they will be referentially equal.

However, if we create new objects with the same properties, they will not be referentially equal to the first object, even though they have the same content.

Although the previous explanations may have provided a clear understanding, some confusion may still exist. To further clarify, let's consider a final example and examine it in detail.

// Here b is assigned the reference to the object that a holds,
// so, the comparison returns true
let a = {
    name: "Michael",
    age: 40
}
let b = a
console.log(b === a) // prints true

//Now b holds a reference to a new object and a holds a reference to the first object, so the comparison returns false
b = {
    name: "Richard",
    age: 45
}
console.log(b === a) // prints false

If you want to check the properties of two distinct objects, then there are tons of ways you can do that. But the easiest method is using the`JSON.stringify` method.

In summary, primitive equality compares values and referential equality compares references to objects.

What type of language is JavaScript?

cpcjain — Wed, 08 Mar 2023 04:12:54 +0000

JavaScript is a high-level single-threaded garbage collected interpreted prototype-based multi-paradigm dynamic language with a non-blocking event loop.

But what does all that mean?

A high-level programming language is a programming language that is more abstract and is easier for humans to read and write than a low-level programming language.
Single threaded means that the JavaScript engine can only execute one piece of code at a time.

  console.time()

  for (let i = 0; i < 100000000; i++){
      // do nothing
  }

  console.timeEnd()
  // default 5.705s

In the above code, the console would start the time then it will loop through a large number of iterations. While the loop is running, the JavaScript engine will not be able to execute any other code.

A garbage collector is a program that automatically frees up memory that is no longer being used by the program. Garbage collection is useful because it helps to prevent memory leaks, which can cause a program to use up more and more memory over time.
An interpreted language is a type of programming language in which the source code is not compiled into machine code that can be run directly on a computer. Instead, the source code is interpreted by another program at runtime, which translates the code into instructions that the computer can execute.
In a prototype-based language, objects can have properties and methods (functions). An object can inherit the properties and methods of its prototype, and it can also have its own properties and methods. This allows objects to be customized and extended in a flexible way.
A multi-paradigm programming language is a language that supports more than one programming paradigm, or approach to programming like object-oriented programming, functional programming, imperative programming, etc.
In a dynamic language, the programmer does not need to specify the type of a value when declaring a variable or a function. This makes writing code easier because you don't have to wait to declare the type of variable when it's declared. But in the long run the freedom and wild nature of JavaScript can work against you making it more difficult to debug and maintain code.
Event loop is a mechanism that allows the program to execute asynchronous code in a non-blocking manner. This feature is important in the context of JavaScript. Since JavaScript is a single-thread language, if a piece of code takes a long time to run, it can block the execution of other code which can make the program appear unresponsive.

  console.log('Start')

  setTimeout(() => {
      console.log('Timeout expired')
  }, 1000);

  // Console
  // Start
  // End
  // Timeout expired

In this code, the setTimeout() function is used to set a timer that will expire after 1000 milliseconds (1 second). When the timer expires, it will generate an event that will be added to the event queue. The program does not stop or block when the setTimeout() function is called, but instead continues to run and processes the event when it becomes available.

And that's a wrap. Thank you for taking the time to read this article. I hope you found it informative and valuable. If you have any thoughts or insights on the topic, please feel free to share them in the comments below. If you'd like to connect or learn more about my work, please don't hesitate to reach out. Thanks again for reading and have a great day!