MongoDB CRUD Operations

Tahmina Nasrin Tazin — Tue, 28 Dec 2021 08:33:43 +0000

MongoDB is a NoSQL database program that is a document-oriented database program. It has gained popularity as NoSQL databases are handy for working with large sets of data. Simple CRUD operations have been described below.

Create
To insert a single document, the insertOne() method can be used. The document object to be inserted has to be passed as the argument. If the insertion is successful, an insertedId field is appended to the object passed in the method. This value is used as the _id in the database.

      const newProduct = {
    name: ‘Flormar Lipstick’,
    price: ‘45.00’,
}
      const result = await lipsticksCollection.insertOne(newProduct);

Retrieve
To retrieve a single document, the findOne() method can be used. The document to be searched has to be queried and the query has to be passed as the argument.

const id = req.params.id;
      const query = { _id: ObjectId(id) };
      const product = await lipsticksCollection.findOne(query);

Update
To update a single document, the updateOne() method can be used. A filter document and an update document has to be passed as argument. The purpose of the filter document is to find the document to be updated. A third argument named options can be passed as well to specify any other options if needed.

const id = req.params.id;
      const filter = { _id: ObjectId(id) };
      const options = { upsert: true };

      const updateDoc = {
        $set: {
          status: "Shipped",
        },
      };
      const result = await ordersCollection.updateOne(
        filter,
        updateDoc,
        options
      );

Delete
To delete a single document, the deleteOne() method can be used. The document to be deleted has to be queried and the query has to be passed as the argument. If the deletion is successful, then the deletedCount is set to 1, which can be checked to test whether the operation was successful.

const id = req.params.id;
      const query = { _id: ObjectId(id) };
      const result = await lipsticksCollection.deleteOne(query);

React Hooks

Tahmina Nasrin Tazin — Tue, 28 Dec 2021 08:19:29 +0000

Hooks are simply functions that allow us to add lifecycle features and states to functional components.

Rules of Hook

There are two rules that must be followed when working with Hooks
Hooks should always be called at the top level. Hooks should not be called inside loops, conditions, or nested functions. This is to ensure that after every render of the components, the Hooks are called in the same order every time.
Hooks can only be called from React functions. Hooks cannot be called from regular JavaScript functions. Therefore, they can be called from functional components and from custom Hooks.

Basic Hooks

useState

const [state, setState] = useState(initialState);

This hook is used to add states to functional components. Using the initialState argument, we can provide an initial state if needed. The hook returns the current state and a function that is used to update the state. If the state is updated, the component is re-rendered.

For naming the state and its updating function, the common convention that is followed is [something, setSomething].

useEffect
This hook is used to perform side functions in the components, such as fetching data, subscription set up etc. It is used to make the component do something right after rendering. It runs after every render by default.

useEffect(()=> {
// some code }, [])

The optional second argument is so that the component re-renders only if the value of that argument has changed.

useContext
This hook is useful in avoiding prop drilling as it allows to manage states globally. The components can be re-rendered when these global states change.

First, the context has to be created and initialized. Then the child components have to be wrapped in the Context Provider and the state value has to be supplied.

const UserContext = createContext()
function Component1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </UserContext.Provider>
  );
}

After this, the user Context will be accessible in all the components.

Custom Hooks

React also gives us the option to create our own hooks according to our needs. We may need custom hooks when we have a reusable function. The custom Hook’s name must start with “use”. Example: useStatus.

DEV Community: Tahmina Nasrin Tazin

MongoDB CRUD Operations

React Hooks

Rules of Hook

Basic Hooks

Custom Hooks