TILs - Fueling Curiosity, One Insight at a Time

import React, { useState, useEffect } from 'react';

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

  // This effect will run only when the count state changes
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // Only re-runs when count changes

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default MyComponent;

// Before deconstruction 
const BlogPost = (props) => { 
  const { title, content, author } = props; 
  // Render blog post using props
  return (
      
          {props.title}
          {props.content}
          Written by: {props.author}
      
  );
}; 

// After deconstruction 
const BlogPost = ({ title, content, author }) => { 
  // Render blog post with title, content, and author 
  return (
      
          {title}
          {content}
          Written by: {author}
      
  );
};

provider "aws" {
  alias  = "us_east"
  region = "us-east-1"
}

provider "aws" {
  alias  = "us_west"
  region = "us-west-1"
}
resource "aws_instance" "example" {
  provider      = aws.us_east
  ami           = "ami-0c55b159cbfafe1f0"
  instance_type = "t2.micro"
}

resource "aws_instance" "example_west" {
  provider      = aws.us_west
  ami           = "ami-0c55b159cbfafe1f0"
  instance_type = "t2.micro"
}

Spread operator in JavaScript is represented by three dots (...). 
It's a useful syntax for manipulating arrays and objects in various ways.

Following are some of the use cases:-

Spread in Arrays:-

1. Copying Arrays: It allows you to create a new array by copying another array.

const originalArray = [1, 2, 3];
const copyArray = [...originalArray];
console.log(copyArray); // [1, 2, 3]


2. Concatenating Arrays: You can merge arrays together.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

3. Adding Elements to Arrays: You can add new elements to an existing array.

const array1 = [1, 2, 3];
const newArray = [...array1, 4, 5, 6];
console.log(newArray); // [1, 2, 3, 4, 5, 6]



Spread in Objects:-

1. Copying Objects: It allows you to create a shallow copy of an object.

const originalObj = { name: 'John', age: 30 };
const copyObj = { ...originalObj };
console.log(copyObj); // { name: 'John', age: 30 }

2. Merging Objects: You can merge multiple objects into one.

const obj1 = { name: 'John' };
const obj2 = { age: 30 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { name: 'John', age: 30 }

3. Adding Properties to Objects: You can add new properties to an object.

const obj1 = { name: 'John' };
const newObj = { ...obj1, age: 30 };
console.log(newObj); // { name: 'John', age: 30 }



Function Arguments:

1. Spread can be used to pass an array as individual arguments to a function.

const numbers = [1, 2, 3];
const sum = (a, b, c) => a + b + c;
console.log(sum(...numbers)); // 6