Anatomy

MongoDB's ObjectID is made of 12 bytes. The 12 bytes consists of

• a 4-byte timestamp.

• a 5-byte random value generated once per process.

• a 3-byte incrementing counter initialized to a random value.

Example:

65f87920068c7d17cb1288d6

65f87920 - Unix Epoch Timestamp

068c7d17cb - Random Value

1288d6 - Incrementing Counter

Constructing ObjectId

You can use the ObjectId() method to construct a new ObjectId.

Optionally, it can take two inputs.

1. hexadecimal - A 24-character hexadecimal string value.

2. integer - The integer value, in seconds, is added to the Unix epoch to create the new timestamp.

   Example:

    > ObjectId(10)
    < ObjectId('0000000a0d098c2eda0f296e')
   

Methods you can use on ObjectId

getTimestamp()

Since the timestamp is included in the ObjectId, you can retrieve the time in which the ObjectId was generated.

> ObjectId('665377378755af3d1e7c5701').getTimestamp()
< 2024-05-26T17:53:59.000Z

> ObjectId('0000000a0d098c2eda0f296e').getTimestamp()
< 1970-01-01T00:00:10.000Z

toString()

You can use this method in case if you want to convert the ObjectId to hexadecimal string.

> ObjectId('665b4d520d098c2eda0f296d').toString()
< 665b4d520d098c2eda0f296d

If you’re a tech enthusiast and resonate with my content, follow me on LinkedIn, GitHub, and Twitter.

1. useState

This might be the first hook you heard about when learning React. It is very common and can be very useful.

As the name suggests it creates a State Variable. This hook helps us to preserve the variables even after the function exits.

import React, { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

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

The hook returns two values: the current value and a function to update the value.

2. useEffect

Another common hook is the useEffect. This is similar to the componentDidMount in Class Components.

They are used to run side effects. They are mainly used when you want to perform any manipulations with every state change or when only a certain value changes.

Let's use the previous example and use useEffect to log the value of count every time it changes.

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

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
      console.log(count);
  }, [count]);

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

You can also return a function from useEffect to do any clean up. It is executed when the component unmounts.

useEffect(() => {
  console.log(count);

  return () => {
    setCount(0);
  };
}, [count]);

3. useMemo

This hooks is used to keep expensive functions from running again and again. They return a memoized value and are updated only when one of the dependencies update.

Let us consider that we have two state variables and an resource intensive / expensive function that takes one of the variables as param.

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

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = expensiveCalculation(count);

  useEffect(() => {
      console.log(count);
  }, [count]);

  const addTodo = (todo) => {
     setTodos(t => [...t, 'todo'];
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me to increase Count
      </button>
      <button onClick={() => addTodo("Example Todo 1")}>
        Click me to set Todo
      </button>
    </div>
  );
}

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  // Do some Intensive Task
  return num;
};

In the above example even though the calculation doesn't have anything to do with todo, we can see that the calculation is done for every render even when the count value hasn't been updated.

To fix this we can simply wrap the function in a useMemo hook and pass in count as the dependency.

const calculation = useMemo(() => expensiveCalculation(count), [count]);

This will make sure that the calculation is calculated only when the count value gets updated.

4. useCallback

The useCallback and useMemo Hooks are similar. The main difference is that useMemo returns a memoized value and useCallback returns a memoized function. Let's modify the above example to create a child component to visualize the use of useCallback better.

import React, { useState, useCallback } from 'react';
import Todos from "./Todos";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

  const addTodo = (todo) => {
    setTodos((t) => [...t, "todo"]);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me to increase Count
      </button>
      <Todos todos={todos} addTodo={addTodo} />
    </div>
  );
};

// Todos.js
import { memo } from "react";

const Todos = ({ todos, addTodo }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
      <button onClick={addTodo}>Add Todo</button>
    </>
  );
};

export default memo(Todos);

When we try to increase the count, we can see that the Todos component is also getting re rendered. It is because every time a component gets re-rendered, its functions get recreated. Due to this the addTodo function isn't the same function as before.

To prevent this, we can use the useCallback hook.

const addTodo = useCallback(() => {
    setTodos((t) => [...t, "New Todo"]);
  }, [todos]);

Now Todos will get re-rendered only when todos prop changes.

5. useRef

The useRef Hook allows you to persist values between renders.

It can be used to access a DOM element directly.

In React, we can add a ref attribute to an element to access it directly in the DOM.

Here's a simple example to see how you can access DOM elements using useRef.

import React, { useRef } from "react";

const App = () => {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
};

export default App;

Apart from this, there is much more you can do with hooks. You can even create your own hooks. Check this doc from the React Docs site to learn more about how you can achieve it.

If you found this article helpful, do share it with your friends.

Let's dive in and add files via the Command Line.

1. Follow the steps 1, 2 and 3 from my previous article!

2. Once done, You should see a screen like this.

3. Assuming you have a folder created in your local machine, Open the terminal and redirect to the project directory. (I have three files with boilerplate code)

4. Run the following command to Initialize the repository.

   git init

5. Now you have to let your machine know which remote repository you're planning to work on. To do that copy the git remote add origin <url> line from the 3rd step and execute it.

6. To add all files run git add . or you can add only a specific file by executing git add index.html The former will add files to the changing area and the later will add only the index.html file.

7. After running the commands, If you want to check the status of your working directory execute git status It will give you an overview of the changes that are tracked and has been added to the stage.

8. Now, to create a commit execute git commit -m"<Desc. of your commit>"

9. Finally push your changes by executing git push origin <branch name>

10. You should now see your files in the repository!

Feel free to drop your suggestions in the comments and if you find it useful give me a like and share it with someone who might benefit from it.

Reach out to me on my Instagram @monish.codes If you have any queries or just want to have a conversation! See you on the flip side.

Right off the bat, I want to clear this doubt many people have!

Is Git and GitHub the same?

The answer is NO! In order to explain it in simpler terms,

• Git is a version control system that lets you manage and keep track of your source code history.

• GitHub is a cloud based hosting service that lets you manage Git Repositories.

How to create a GitHub Repository?

1. Signup for your GitHub account here.

2. After you create an account, you should see a create New repository button. You can also click this link.

3. Fill in the repository Name, Description and the Visibility (Public / Private). And then Click Create Repository.

4. Once done, You should see a screen like this. There are many ways that you can add files to the repository. But in this article we will see how to directly upload existing files.

5. Click upload an existing file and in the following page you will be able to upload files from your local machine.

6. Once uploaded, you can add a Commit Title and Description to make it more meaningful. And then Click Commit Changes.

7. Voila! You have created your First Repository