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 (
      <div>
          <h1>{props.title}</h1>
          <p>{props.content}</p>
          <p>Written by: {props.author}</p>
      </div>
  );
}; 

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

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

❯ kubectl config get-contexts
CURRENT   NAME                      CLUSTER                   AUTHINFO                  NAMESPACE
          docker-desktop            docker-desktop            docker-desktop
*         kind-kube-nginx-cluster   kind-kube-nginx-cluster   kind-kube-nginx-cluster

❯ kubectl config use-context docker-desktop
Switched to context "docker-desktop".

curl -L \\
  -H "Accept: application/vnd.github+json" \\
  -H "Authorization: Bearer <YOUR-TOKEN>" \\
  -H "X-GitHub-Api-Version: 2022-11-28" \\
  https://api.github.com/orgs/ORG/members

[
  {
    "login": "octocat",
    "id": 1,
    "node_id": "MDQ6VXNlcjE=",
    "avatar_url": "https://github.com/images/error/octocat_happy.gif",
    "gravatar_id": "",
    "url": "https://api.github.com/users/octocat",
    "html_url": "https://github.com/octocat",
    "followers_url": "https://api.github.com/users/octocat/followers",
    "following_url": "https://api.github.com/users/octocat/following{/other_user}",
    "gists_url": "https://api.github.com/users/octocat/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/octocat/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/octocat/subscriptions",
    "organizations_url": "https://api.github.com/users/octocat/orgs",
    "repos_url": "https://api.github.com/users/octocat/repos",
    "events_url": "https://api.github.com/users/octocat/events{/privacy}",
    "received_events_url": "https://api.github.com/users/octocat/received_events",
    "type": "User",
    "site_admin": false
  }
]

error /Users/<user>/project/node_modules/sharp: Command failed.
Exit code: 127
Command: (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)