The Journey of #100DaysOfCode (@Ayman_Dandan)

๐ƒ๐š๐ฒ ๐Ÿ”๐Ÿ’ of 100daysofcode

  • ๐‘ต๐’†๐’”๐’•๐’†๐’… ๐‘น๐’๐’–๐’•๐’Š๐’๐’ˆ ๐’˜๐’Š๐’•๐’‰ <๐‘ถ๐’–๐’•๐’๐’†๐’•> -

Nested routes are useful for creating layouts where different parts of the page change based on the current route. The <๐‘ถ๐’–๐’•๐’๐’†๐’•> component is the key to achieving this in React Router.

๐—˜๐˜…๐—ฝ๐—น๐—ฎ๐—ป๐—ฎ๐˜๐—ถ๐—ผ๐—ป ๐—ผ๐—ณ ๐˜๐—ต๐—ฒ ๐—ฎ๐˜๐˜๐—ฎ๐—ฐ๐—ต๐—ฒ๐—ฑ ๐˜€๐—ป๐—ถ๐—ฝ๐—ฝ๐—ฒ๐˜:
โ†’ <Route path="/dashboard/*" element={<Dashboard />}>: Defines a parent route for the dashboard.
โ†’ <Outlet />: Acts as a placeholder for nested routes within the parent component.

This allows for more complex UI structures where different components are displayed based on the current route within a section of the page.

2 Likes

๐ƒ๐š๐ฒ ๐Ÿ”๐Ÿ“ of #100DaysOfCode

  • ๐‘ท๐’“๐’๐’ˆ๐’“๐’‚๐’Ž๐’Ž๐’‚๐’•๐’Š๐’„ ๐‘ต๐’‚๐’—๐’Š๐’ˆ๐’‚๐’•๐’Š๐’๐’ ๐’˜๐’Š๐’•๐’‰ ๐‘ต๐’‚๐’—๐’Š๐’ˆ๐’‚๐’•๐’† ๐’‚๐’๐’… ๐’–๐’”๐’†๐‘ต๐’‚๐’—๐’Š๐’ˆ๐’‚๐’•๐’† -

There are times when you need to redirect users programmatically, such as after form submission or authentication. The ๐‘ต๐’‚๐’—๐’Š๐’ˆ๐’‚๐’•๐’† component and the ๐’–๐’”๐’†๐‘ต๐’‚๐’—๐’Š๐’ˆ๐’‚๐’•๐’† hook provide a way to navigate to different routes programmatically.

๐—˜๐˜…๐—ฝ๐—น๐—ฎ๐—ป๐—ฎ๐˜๐—ถ๐—ผ๐—ป ๐—ผ๐—ณ ๐˜๐—ต๐—ฒ ๐—ฎ๐˜๐˜๐—ฎ๐—ฐ๐—ต๐—ฒ๐—ฑ ๐˜€๐—ป๐—ถ๐—ฝ๐—ฝ๐—ฒ๐˜:
โ†’ <Navigate to="/dashboard" replace /> Redirects to the dashboard if the user is logged in.
โ†’ useNavigate(): A hook that returns a function to navigate programmatically.

This is particularly useful for handling user flows that require conditional redirects.

2 Likes

๐ƒ๐š๐ฒ ๐Ÿ”๐Ÿ” of #100DaysOfCode

  • ๐‘พ๐’๐’“๐’Œ๐’Š๐’๐’ˆ ๐’˜๐’Š๐’•๐’‰ ๐‘ผ๐‘น๐‘ณ ๐‘ท๐’‚๐’“๐’‚๐’Ž๐’†๐’•๐’†๐’“๐’” ๐’Š๐’ ๐‘น๐’†๐’‚๐’„๐’• ๐‘น๐’๐’–๐’•๐’†๐’“ -

URL parameters are a common way to pass data through the URL, and React Router makes it easy to access these parameters using the ๐’–๐’”๐’†๐‘ท๐’‚๐’“๐’‚๐’Ž๐’” hook.

๐—˜๐˜…๐—ฝ๐—น๐—ฎ๐—ป๐—ฎ๐˜๐—ถ๐—ผ๐—ป ๐—ผ๐—ณ ๐˜๐—ต๐—ฒ ๐—ฎ๐˜๐˜๐—ฎ๐—ฐ๐—ต๐—ฒ๐—ฑ ๐˜€๐—ป๐—ถ๐—ฝ๐—ฝ๐—ฒ๐˜:
โ†’ useParams(): Extracts the parameters from the current URL, in this case, userId.
โ†’ This is useful for creating dynamic routes where different content is rendered based on the URL.

Using URL parameters allows you to build more dynamic and user-specific pages, such as user profiles or product details.
1725788867702

2 Likes

๐ƒ๐š๐ฒ ๐Ÿ”๐Ÿ• of #100DaysOfCode

  • ๐‘ฏ๐’‚๐’๐’…๐’๐’Š๐’๐’ˆ ๐Ÿ’๐ŸŽ๐Ÿ’ ๐‘ท๐’‚๐’ˆ๐’†๐’” ๐’˜๐’Š๐’•๐’‰ ๐‘น๐’†๐’‚๐’„๐’• ๐‘น๐’๐’–๐’•๐’†๐’“ -

Handling 404 pages is essential for a good user experience. React Router allows you to easily implement a 404 page by defining a route that catches all undefined paths.

๐„๐ฑ๐ฉ๐ฅ๐š๐ง๐š๐ญ๐ข๐จ๐ง ๐จ๐Ÿ ๐ญ๐ก๐ž ๐š๐ญ๐ญ๐š๐œ๐ก๐ž๐ ๐ฌ๐ง๐ข๐ฉ๐ฉ๐ž๐ญ:
โ†’ <Route path="*" element={<NotFound />} />: Catches all routes that donโ€™t match any defined routes and renders the NotFound component.

This approach ensures that users are informed when they reach a route that doesnโ€™t exist, improving the overall user experience.
1725789119184

2 Likes

๐ƒ๐š๐ฒ ๐Ÿ”๐Ÿ of #100DaysOfCode

  • ๐‘ฐ๐’๐’•๐’“๐’๐’…๐’–๐’„๐’•๐’Š๐’๐’ ๐’•๐’ ๐’“๐’†๐’‚๐’„๐’•-๐’“๐’๐’–๐’•๐’†๐’“-๐’…๐’๐’Ž -

When building React applications, managing navigation and routing is a common challenge. The ๐’“๐’†๐’‚๐’„๐’•-๐’“๐’๐’–๐’•๐’†๐’“-๐’…๐’๐’Ž package offers a set of components and hooks that simplify this process, allowing you to create a seamless and dynamic user experience.

React Router has become the de facto standard for routing in React applications. It handles everything from simple links to complex nested routes, making it easier to navigate through your app.

๐—ช๐—ต๐˜† ๐˜‚๐˜€๐—ฒ ๐’“๐’†๐’‚๐’„๐’•-๐’“๐’๐’–๐’•๐’†๐’“-๐’…๐’๐’Ž ?
โ†’ ๐ƒ๐ž๐œ๐ฅ๐š๐ซ๐š๐ญ๐ข๐ฏ๐ž ๐ซ๐จ๐ฎ๐ญ๐ข๐ง๐ : Define routes using React components.
โ†’ ๐๐ž๐ฌ๐ญ๐ž๐ ๐ซ๐จ๐ฎ๐ญ๐ข๐ง๐ : Create complex layouts with nested routes.
โ†’ ๐ƒ๐ฒ๐ง๐š๐ฆ๐ข๐œ ๐ซ๐จ๐ฎ๐ญ๐ข๐ง๐ : React to changes in route parameters or query strings.
โ†’ ๐‚๐จ๐ฆ๐ฉ๐จ๐ง๐ž๐ง๐ญ-๐›๐š๐ฌ๐ž๐: Works seamlessly with Reactโ€™s component architecture.

This series of posts will explore key components and hooks provided by ๐’“๐’†๐’‚๐’„๐’•-๐’“๐’๐’–๐’•๐’†๐’“-๐’…๐’๐’Ž, starting with the basics and moving towards more advanced concepts.

2 Likes

๐ƒ๐š๐ฒ ๐Ÿ”๐Ÿ of #100DaysOfCode

  • ๐‘ต๐’‚๐’—๐’Š๐’ˆ๐’‚๐’•๐’Š๐’๐’ˆ ๐’˜๐’Š๐’•๐’‰ <๐‘ณ๐’Š๐’๐’Œ> ๐’Š๐’ ๐‘น๐’†๐’‚๐’„๐’• ๐‘น๐’๐’–๐’•๐’†๐’“ -

One of the simplest yet most essential components in ๐’“๐’†๐’‚๐’„๐’•-๐’“๐’๐’–๐’•๐’†๐’“-๐’…๐’๐’Ž is <๐‘ณ๐’Š๐’๐’Œ>. It allows you to navigate between different pages in your application without triggering a full page reload.

๐—˜๐˜…๐—ฝ๐—น๐—ฎ๐—ป๐—ฎ๐˜๐—ถ๐—ผ๐—ป ๐—ผ๐—ณ ๐˜๐—ต๐—ฒ ๐—ฎ๐˜๐˜๐—ฎ๐—ฐ๐—ต๐—ฒ๐—ฑ ๐˜€๐—ป๐—ถ๐—ฝ๐—ฝ๐—ฒ๐˜:

  • <Link to="/">Home</Link> creates a hyperlink to the home route.
  • The to prop defines the target route, which could be a relative or absolute path.

Using <๐‘ณ๐’Š๐’๐’Œ> instead of a regular anchor tag (<a>) ensures that the page does not reload and the app remains a single-page application (SPA).
1725787532566

2 Likes

๐ƒ๐š๐ฒ ๐Ÿ”๐Ÿ‘ of #100DaysOfCode

  • ๐‘ซ๐’†๐’‡๐’Š๐’๐’Š๐’๐’ˆ ๐‘น๐’๐’–๐’•๐’†๐’” ๐’˜๐’Š๐’•๐’‰ <๐‘น๐’๐’–๐’•๐’†> ๐’‚๐’๐’… <๐‘น๐’๐’–๐’•๐’†๐’”> -

Routing in React Router is made simple with the <๐‘น๐’๐’–๐’•๐’†> and <๐‘น๐’๐’–๐’•๐’†๐’”> components. These components define the structure of your applicationโ€™s routes, determining what component should be rendered based on the current URL.

๐—˜๐˜…๐—ฝ๐—น๐—ฎ๐—ป๐—ฎ๐˜๐—ถ๐—ผ๐—ป ๐—ผ๐—ณ ๐˜๐—ต๐—ฒ ๐—ฎ๐˜๐˜๐—ฎ๐—ฐ๐—ต๐—ฒ๐—ฑ ๐˜€๐—ป๐—ถ๐—ฝ๐—ฝ๐—ฒ๐˜:
โ†’ <๐‘น๐’๐’–๐’•๐’†๐’”>: A container for all your routes, managing which one is active based on the URL.
โ†’ <Route path="/" element={<Home />} />: Defines a route that renders the ๐˜๐˜ฐ๐˜ฎ๐˜ฆ component when the path is /.

This structure allows you to create a clear and maintainable routing system for your React application.
1725787852061

2 Likes

๐ƒ๐š๐ฒ ๐Ÿ”๐Ÿ– of #100DaysOfCode

  • ๐‘ฏ๐’‚๐’๐’…๐’๐’Š๐’๐’ˆ ๐‘จ๐’”๐’š๐’๐’„๐’‰๐’“๐’๐’๐’๐’–๐’” ๐‘ซ๐’‚๐’•๐’‚ ๐’Š๐’ ๐‘น๐’†๐’‚๐’„๐’• ๐’˜๐’Š๐’•๐’‰ ๐‘ญ๐’†๐’•๐’„๐’‰ ๐’‚๐’๐’… ๐‘จ๐’™๐’Š๐’๐’” -

Fetching data from APIs is a common task in React applications. You can use the built-in ๐’‡๐’†๐’•๐’„๐’‰ function or a library like Axios to handle HTTP requests and integrate data into your components.

๐”๐ฌ๐ข๐ง๐  ๐…๐ž๐ญ๐œ๐ก
The ๐’‡๐’†๐’•๐’„๐’‰ API is a built-in JavaScript function that allows you to make HTTP requests to APIs. It returns a promise that resolves to the response object.

๐”๐ฌ๐ข๐ง๐  ๐€๐ฑ๐ข๐จ๐ฌ
Axios is a popular library that simplifies HTTP requests by providing a more powerful and flexible API compared to fetch.

๐—˜๐˜…๐—ฝ๐—น๐—ฎ๐—ป๐—ฎ๐˜๐—ถ๐—ผ๐—ป ๐—ผ๐—ณ ๐˜๐—ต๐—ฒ ๐—ฎ๐˜๐˜๐—ฎ๐—ฐ๐—ต๐—ฒ๐—ฑ ๐˜€๐—ป๐—ถ๐—ฝ๐—ฝ๐—ฒ๐˜๐˜€:
โ†’ ๐’‡๐’†๐’•๐’„๐’‰ is used to retrieve data from an API, and the useEffect hook ensures the data is fetched when the component mounts.
โ†’ Axios simplifies the process of making HTTP requests, handling things like request cancellation, and automatically parsing JSON responses.

๐—–๐—ผ๐—ป๐—ฐ๐—น๐˜‚๐˜€๐—ถ๐—ผ๐—ป:
โ†’ ๐…๐ž๐ญ๐œ๐ก: Native to JavaScript and great for simple use cases.
โ†’ ๐€๐ฑ๐ข๐จ๐ฌ: More powerful and flexible, ideal for complex HTTP requests.

Both tools are valuable depending on the complexity of your data-fetching needs.
1725789631247
1725789631243

2 Likes

๐ƒ๐š๐ฒ ๐Ÿ”๐Ÿ— of #100DaysOfCode

  • ๐‘ซ๐’†๐’ƒ๐’–๐’ˆ๐’ˆ๐’Š๐’๐’ˆ ๐‘น๐’†๐’‚๐’„๐’• ๐‘จ๐’‘๐’‘๐’๐’Š๐’„๐’‚๐’•๐’Š๐’๐’๐’” -

Debugging is an essential skill for every developer, and React provides several tools to help identify and fix issues in your application.

๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐——๐—ฒ๐˜ƒ๐—ฒ๐—น๐—ผ๐—ฝ๐—ฒ๐—ฟ ๐—ง๐—ผ๐—ผ๐—น๐˜€
React Developer Tools is a Chrome extension that provides a powerful way to inspect and debug React components.

-๐—™๐—ฒ๐—ฎ๐˜๐˜‚๐—ฟ๐—ฒ๐˜€:
โ†’ ๐‚๐จ๐ฆ๐ฉ๐จ๐ง๐ž๐ง๐ญ ๐‡๐ข๐ž๐ซ๐š๐ซ๐œ๐ก๐ฒ: Visualize the component tree of your application.
โ†’ ๐๐ซ๐จ๐ฉ๐ฌ ๐š๐ง๐ ๐’๐ญ๐š๐ญ๐ž: Inspect props and state of any component.
โ†’ ๐๐ž๐ซ๐Ÿ๐จ๐ซ๐ฆ๐š๐ง๐œ๐ž ๐๐ซ๐จ๐Ÿ๐ข๐ฅ๐ข๐ง๐ : Analyze the performance of your components.

๐„๐ฑ๐š๐ฆ๐ฉ๐ฅ๐ž: After installing the extension, open Chrome DevTools and find the โ€œReactโ€ tab. Here, you can explore your applicationโ€™s component tree, inspect props and state, and more.

๐—–๐—ผ๐—ป๐˜€๐—ผ๐—น๐—ฒ ๐—Ÿ๐—ผ๐—ด๐—ด๐—ถ๐—ป๐—ด
Sometimes, the simplest debugging method is adding ๐˜ค๐˜ฐ๐˜ฏ๐˜ด๐˜ฐ๐˜ญ๐˜ฆ.๐˜ญ๐˜ฐ๐˜จ statements in your components to track down issues.

๐—˜๐—ฟ๐—ฟ๐—ผ๐—ฟ ๐—•๐—ผ๐˜‚๐—ป๐—ฑ๐—ฎ๐—ฟ๐—ถ๐—ฒ๐˜€
React provides Error Boundaries to catch and handle errors in components gracefully. These are especially useful in production applications to avoid crashing the entire app.

๐—–๐—ผ๐—ป๐—ฐ๐—น๐˜‚๐˜€๐—ถ๐—ผ๐—ป:
โ†’ ๐‘๐ž๐š๐œ๐ญ ๐ƒ๐ž๐ฏ๐“๐จ๐จ๐ฅ๐ฌ: Essential for visual debugging of React components.
โ†’ ๐‚๐จ๐ง๐ฌ๐จ๐ฅ๐ž ๐‹๐จ๐ ๐ ๐ข๐ง๐ :: Simple yet effective for tracing issues.
โ†’ ๐„๐ซ๐ซ๐จ๐ซ ๐๐จ๐ฎ๐ง๐๐š๐ซ๐ข๐ž๐ฌ: ๐„๐ซ๐ซ๐จ๐ซ ๐๐จ๐ฎ๐ง๐๐š๐ซ๐ข๐ž๐ฌ:

Effective debugging ensures your React application runs smoothly and is critical for maintaining a reliable codebase.


1 Like

๐ƒ๐š๐ฒ ๐Ÿ•๐ŸŽ of #100DaysOfCode

As I continue my journey through the 100 Days of Code Challenge, Iโ€™ve encountered several useful insights while working on the backend of my MERN stack project. Whether youโ€™re just getting started with MongoDB, Express, Node.js, or youโ€™re an experienced developer, Iโ€™ll be sharing practical tips to make backend development smoother.

These tips will cover a range of topics, from managing data storage in MongoDB to handling authentication and optimizing your code. I hope these insights help you as much as theyโ€™ve helped me! Stay tuned for more posts, and feel free to ask any questions.

1 Like

๐ƒ๐š๐ฒ ๐Ÿ•๐Ÿ of #100DaysOfCode

  • ๐‘น๐’†๐’Ž๐’๐’—๐’Š๐’๐’ˆ ๐‘บ๐’–๐’ƒ๐’…๐’๐’„๐’–๐’Ž๐’†๐’๐’• ๐‘ฐ๐‘ซ๐’” ๐’Š๐’ ๐‘ด๐’๐’๐’ˆ๐’๐’๐’”๐’† -

When working with arrays of objects in Mongoose, sometimes you donโ€™t need every object to have its own _๐˜ช๐˜ฅ. This can save space and make your data more organized. By default, Mongoose assigns an _๐˜ช๐˜ฅ to each subdocument, but hereโ€™s how you can disable it:

โ†’ Use id: false in your schema definition for subdocuments where you donโ€™t need the _๐˜ช๐˜ฅ. (see the attached code for reference)

With this setup, each subdocument in the items array will not have its own _๐˜ช๐˜ฅ, making your data leaner. This is particularly useful in cases where you donโ€™t need to reference subdocuments individually.
1726564236856

1 Like

๐ƒ๐š๐ฒ ๐Ÿ•๐Ÿ of #100DaysOfCode

  • ๐‘ผ๐’๐’…๐’†๐’“๐’”๐’•๐’‚๐’๐’…๐’Š๐’๐’ˆ ๐’•๐’‰๐’Š๐’” ๐’Š๐’ ๐‘ด๐’๐’๐’ˆ๐’๐’๐’”๐’† ๐‘ฏ๐’๐’๐’Œ๐’” -

Mongoose hooks (also called middleware) allow you to run code before or after certain operations, like saving or updating a document. But handling ๐’•๐’‰๐’Š๐’” in Mongoose hooks can be tricky, as its value changes based on the type of hook.

In pre-hooks, ๐’•๐’‰๐’Š๐’” refers to the document for operations like save.

In post-hooks, however, ๐’•๐’‰๐’Š๐’” doesnโ€™t refer to the document. Instead, the document is passed as an argument to the hook.

Knowing the difference can save you from unexpected behavior when modifying or logging documents.

1 Like

๐ƒ๐š๐ฒ ๐Ÿ•๐Ÿ‘ of #100DaysOfCode

  • ๐‘จ๐’„๐’„๐’†๐’”๐’”๐’Š๐’๐’ˆ ๐‘ซ๐’๐’„๐’–๐’Ž๐’†๐’๐’•๐’” ๐’Š๐’ ๐‘ซ๐’Š๐’‡๐’‡๐’†๐’“๐’†๐’๐’• ๐‘ด๐’๐’๐’ˆ๐’๐’๐’”๐’† ๐‘ฏ๐’๐’๐’Œ๐’” -

Mongoose offers a variety of hooks, such as pre and post hooks, for operations like ๐˜ด๐˜ข๐˜ท๐˜ฆ, ๐˜ฅ๐˜ฆ๐˜ญ๐˜ฆ๐˜ต๐˜ฆ๐˜–๐˜ฏ๐˜ฆ, ๐˜ง๐˜ช๐˜ฏ๐˜ฅ๐˜–๐˜ฏ๐˜ฆ๐˜ˆ๐˜ฏ๐˜ฅ๐˜œ๐˜ฑ๐˜ฅ๐˜ข๐˜ต๐˜ฆ, and others. One tricky part of working with these hooks is understanding how to access the document being modified.

Hereโ€™s how to access the document in some common hooks:

โ†’ ๐ฌ๐š๐ฏ๐ž ๐ก๐จ๐จ๐ค: In pre-hooks for ๐˜ด๐˜ข๐˜ท๐˜ฆ, ๐ญ๐ก๐ข๐ฌ refers to the document being saved. You can directly modify or access the document using this.

โ†’ ๐Ÿ๐ข๐ง๐๐Ž๐ง๐ž๐€๐ง๐๐”๐ฉ๐๐š๐ญ๐ž ๐ก๐จ๐จ๐ค: For ๐˜ง๐˜ช๐˜ฏ๐˜ฅ๐˜–๐˜ฏ๐˜ฆ๐˜ˆ๐˜ฏ๐˜ฅ๐˜œ๐˜ฑ๐˜ฅ๐˜ข๐˜ต๐˜ฆ, ๐ญ๐ก๐ข๐ฌ refers to the query by default, not the document. However, you can change this behavior to access the document by setting { document: true, query: false } in the options.

โ†’ ๐๐ž๐ฅ๐ž๐ญ๐ž๐Ž๐ง๐ž ๐ก๐จ๐จ๐ค: In the pre-hook for ๐˜ฅ๐˜ฆ๐˜ญ๐˜ฆ๐˜ต๐˜ฆ๐˜–๐˜ฏ๐˜ฆ, this refers to the query. However, similar to ๐˜ง๐˜ช๐˜ฏ๐˜ฅ๐˜–๐˜ฏ๐˜ฆ๐˜ˆ๐˜ฏ๐˜ฅ๐˜œ๐˜ฑ๐˜ฅ๐˜ข๐˜ต๐˜ฆ, you can set { document: true, query: false } to access the document itself.

By using the options { document: true, query: false }, you can access the document in hooks where you would normally only have access to the query. This flexibility can save you time and effort when working with Mongoose hooks.

1 Like

๐ƒ๐š๐ฒ ๐Ÿ•๐Ÿ’ of #100DaysOfCode

  • ๐‘ผ๐’”๐’Š๐’๐’ˆ ๐‘จ๐’”๐’š๐’๐’„ ๐‘ญ๐’–๐’๐’„๐’•๐’Š๐’๐’๐’” ๐’Š๐’ ๐‘ด๐’๐’๐’ˆ๐’๐’๐’”๐’† ๐‘ฏ๐’๐’๐’Œ๐’” -

Mongoose hooks can be tricky when dealing with asynchronous operations. By default, hooks expect you to call ๐˜ฏ๐˜ฆ๐˜น๐˜ต() to move on, but what if you need to perform asynchronous work inside a hook?

Good news: Mongoose supports async functions inside hooks. Instead of manually handling ๐˜ฏ๐˜ฆ๐˜น๐˜ต(), you can simply use await and let Mongoose handle the rest.

This can simplify your code and avoid callback hell when dealing with complex database operations.
1726565604271

1 Like

๐ƒ๐š๐ฒ ๐Ÿ•๐Ÿ“ of #100DaysOfCode

Wow, day 75 already! Weโ€™re nearing the end of this incredible journey. Itโ€™s been a challenging but rewarding experience, and itโ€™s been amazing to share tips, knowledge, and insights with you along the way. I hope youโ€™ve found these posts helpful in your own coding journey. Letโ€™s keep pushing through the last stretch togetherโ€”thereโ€™s still so much to learn, but weโ€™re almost there! Keep going, and donโ€™t lose that momentum. :rocket::muscle:

In todayโ€™s tip, weโ€™re diving into:

  • ๐‘ถ๐’‘๐’•๐’Š๐’Ž๐’Š๐’›๐’Š๐’๐’ˆ ๐‘ธ๐’–๐’†๐’“๐’Š๐’†๐’” ๐’˜๐’Š๐’•๐’‰ ๐‘ด๐’๐’๐’ˆ๐’๐’๐’”๐’†โ€™๐’” .๐’๐’†๐’‚๐’() -

When you need to retrieve a large number of documents from MongoDB and you donโ€™t need Mongooseโ€™s model methods or virtuals, using .๐’๐’†๐’‚๐’() can drastically improve performance.

By calling .๐’๐’†๐’‚๐’(), Mongoose skips the creation of full Mongoose documents and instead returns plain JavaScript objects.

๐—˜๐˜…๐—ฎ๐—บ๐—ฝ๐—น๐—ฒ:
const users = await User.find({}).lean();

๐–๐ก๐ž๐ง ๐ญ๐จ ๐ฎ๐ฌ๐ž .๐’๐’†๐’‚๐’():
If youโ€™re only reading data and donโ€™t need to call methods like ๐˜ด๐˜ข๐˜ท๐˜ฆ on the documents, use .๐’๐’†๐’‚๐’() to avoid unnecessary overhead. This is especially useful for optimizing APIs.

Remember, optimizing your codebase is crucial, but knowing when and where to apply these optimizations makes all the difference. Stick around for more tips and insights as we continue this 100 Days of Code journey together!

๐ƒ๐š๐ฒ ๐Ÿ•๐Ÿ” of #100DaysOfCode

  • ๐‘บ๐’•๐’๐’“๐’Š๐’๐’ˆ ๐‘บ๐’Ž๐’‚๐’๐’ ๐‘ฐ๐’Ž๐’‚๐’ˆ๐’†๐’” ๐’Š๐’ ๐‘ด๐’๐’๐’ˆ๐’๐‘ซ๐‘ฉ ๐‘ซ๐’๐’„๐’–๐’Ž๐’†๐’๐’•๐’” -

MongoDBโ€™s BSON type allows you to store small images directly inside documents. However, remember that the total document size limit is 16MB, so this is only suitable for smaller files like avatars or thumbnails.

In the attached snippet is how you can store a small image using BSON ๐‘ฉ๐’–๐’‡๐’‡๐’†๐’“ type.

For larger files, consider GridFS, which weโ€™ll cover in the next post.
1726566851709

1 Like

๐ƒ๐š๐ฒ ๐Ÿ•๐Ÿ• of #100DaysOfCode

  • ๐‘บ๐’•๐’๐’“๐’Š๐’๐’ˆ ๐‘ณ๐’‚๐’“๐’ˆ๐’† ๐‘ญ๐’Š๐’๐’†๐’” ๐‘ผ๐’”๐’Š๐’๐’ˆ ๐‘ฎ๐’“๐’Š๐’…๐‘ญ๐‘บ ๐’Š๐’ ๐‘ด๐’๐’๐’ˆ๐’๐‘ซ๐‘ฉ -

If you need to store large images or files in MongoDB, GridFS is the way to go. It splits files into chunks, allowing you to store files that exceed the 16MB document limit.

Please refer to the attached snippet for a quick look at how you can use GridFS in a Node.js app.

GridFS gives you the flexibility to store and retrieve large files without worrying about MongoDBโ€™s size limits.

1 Like

๐ƒ๐š๐ฒ ๐Ÿ•๐Ÿ– of #100DaysOfCode

  • ๐‘ผ๐’”๐’Š๐’๐’ˆ ๐‘ฐ๐’๐’…๐’†๐’™๐’†๐’” ๐’Š๐’ ๐‘ด๐’๐’๐’ˆ๐’๐‘ซ๐‘ฉ ๐’‡๐’๐’“ ๐‘ญ๐’‚๐’”๐’•๐’†๐’“ ๐‘ธ๐’–๐’†๐’“๐’Š๐’†๐’” -

MongoDB lets you create indexes to speed up query performance, especially on large collections. Indexes allow MongoDB to quickly locate documents based on the indexed fields, reducing the need for a full collection scan.

Hereโ€™s how you can create an index on a field in Mongoose:

userSchema.index({ email: 1 }); // Create an ascending index on the 'email' field

You can also create ๐œ๐จ๐ฆ๐ฉ๐จ๐ฎ๐ง๐ ๐ข๐ง๐๐ž๐ฑ๐ž๐ฌ by indexing multiple fields:

userSchema.index({ firstName: 1, lastName: 1 });

Using indexes correctly can make your database queries significantly faster, but be cautious not to over-index, as it increases storage space and write times.

๐ƒ๐š๐ฒ ๐Ÿ•๐Ÿ— of #100DaysOfCode

  • ๐‘ช๐’‚๐’”๐’„๐’‚๐’…๐’Š๐’๐’ˆ ๐‘ซ๐’†๐’๐’†๐’•๐’†๐’” ๐’Š๐’ ๐‘ด๐’๐’๐’ˆ๐’๐’๐’”๐’† ๐’˜๐’Š๐’•๐’‰ ๐‘ด๐’Š๐’…๐’…๐’๐’†๐’˜๐’‚๐’“๐’† -

When deleting a document in MongoDB, sometimes you need to remove associated data, like comments or posts related to a user. This is where cascading deletes come in handy.

Using Mongoose pre-hooks, you can ensure that when a document is deleted, related documents are also removed.

The attached snippet is an example of a cascading delete on a User model to delete related Post documents.

This way, when a user is deleted, all their posts will also be removed, keeping your database clean and consistent.

1 Like