Drawings of various people and logo from the official <a href="https://notion.so" target="_blank" rel="noreferrer noopener">Notion.so website<span class="hidden">(Opens in a new tab)</span></a>

Notion.so

Like many, I like to put a lot of notes down and believe I'll eventually get back to them and find all I want 🤡.

While that has not been the case with my absolutely messy Apple notes, for the past year I've been trying to make the most of <a href="https://notion.so" target="_blank" rel="noreferrer noopener">Notion.so<span class="hidden"> (Opens in a new tab)</span></a> and take advantage of the beautiful features it offers. From database views to kanban boards, with its easy-peasy formatting options that allow for easier skimmin'-through content, it was easy for Notion to win my attention. Darn, even a simple to-do list looks so nice and gives you such a strong sense of achievement after you write it! 😂

Let's then dive in and look into the nicest resources Notion has to offer, as well as some tricks and tips on how to use its features!

## Free templates

Let's start simple with the <a href="https://www.notion.so/templates" target="_blank" rel="noreferrer noopener">huge selection of templates that Notion offers<span class="hidden"> (Opens in a new tab)</span></a>. These templates are mostly created by the community and come in all sorts of styles; from the kawaii-est of the cutest things to the most elegant and simplistic styles.

<figure>
  <img src="https://images.ctfassets.net/hzu7wkrk7tly/1maxoWHzwg9DGl6zsML7JM/bdc25aa3180a5611af57b1fdd396c1f3/notion_templates.png?w=1500&fm=avif&r=50" class="big-picture" />
<figcaption>
  Notion offers <a href="https://www.notion.so/templates" target="_blank" rel="noreferrer noopener">a beautiful selection of templates<span class="hidden"> (Opens in a new tab)</span></a> that accommodates all sorts of needs, whether you want to track personal goals or be more productive at work.
  </figcaption>
  </figure>

Some of my favourites for personal use are:

- The extremely cute <a href="https://www.notion.so/templates/over-the-rainbow" target="_blank" rel="noreferrer noopener">Over the rainbow<span class="hidden"> (Opens in a new tab)</span></a> by <a href="https://www.notion.so/@corbyn-lee-holliday" target="_blank" rel="noreferrer noopener">Corbyn Lee Holliday<span class="hidden"> (Opens in a new tab)</span></a>
- <a href="https://www.notion.so/templates/minimal-pomodoro-tracker" target="_blank" rel="noreferrer noopener">Minimal Pomodoro Tracker<span class="hidden"> (Opens in a new tab)</span></a> by <a href="https://www.notion.so/@raiu-rajamoney" target="_blank" rel="noreferrer noopener">Raiu Rajamoney<span class="hidden"> (Opens in a new tab)</span></a>
- <a href="https://www.notion.so/templates/minimal-dashboard" target="_blank" rel="noreferrer noopener">Minimal dashboard<span class="hidden"> (Opens in a new tab)</span></a> by <a href="https://www.notion.so/@maas-lalani" target="_blank" rel="noreferrer noopener">Maas Lalani<span class="hidden"> (Opens in a new tab)</span></a>
- <a href="https://www.notion.so/templates/book-tracker-3" target="_blank" rel="noreferrer noopener">Book tracker<span class="hidden"> (Opens in a new tab)</span></a> by <a href="https://www.notion.so/@easlo" target="_blank" rel="noreferrer noopener">Easlo<span class="hidden"> (Opens in a new tab)</span></a>
- <a href="https://www.notion.so/templates/fitness-planner-4" target="_blank" rel="noreferrer noopener">Fitness planner<span class="hidden"> (Opens in a new tab)</span></a> by <a href="https://www.notion.so/@jordi-rodriguez" target="_blank" rel="noreferrer noopener">Jordi Rodriguez<span class="hidden"> (Opens in a new tab)</span></a>
- <a href="https://www.notion.so/templates/apartment-hunt" target="_blank" rel="noreferrer noopener">Apartment hunt<span class="hidden"> (Opens in a new tab)</span></a> by <a href="https://www.notion.so/@luke-waring" target="_blank" rel="noreferrer noopener">https://www.notion.so/@luke-waring<span class="hidden"> (Opens in a new tab)</span></a>

And some of those I'd like to try at work, if I were just a tad less lazy, are:

- <a href="https://www.notion.so/templates/daily-standup-dashboard" target="_blank" rel="noreferrer noopener">Daily standup dashboard<span class="hidden"> (Opens in a new tab)</span></a> by <a href="https://www.notion.so/@raiu-rajamoney" target="_blank" rel="noreferrer noopener">Raiu Rajamoney<span class="hidden"> (Opens in a new tab)</span></a>
- <a href="https://www.notion.so/templates/roadmap" target="_blank" rel="noreferrer noopener">Roadmap<span class="hidden"> (Opens in a new tab)</span></a> by <a href="https://www.notion.so/@notion" target="_blank" rel="noreferrer noopener">Notion<span class="hidden"> (Opens in a new tab)</span></a>
- <a href="https://www.notion.so/templates/1-1-notes" target="_blank" rel="noreferrer noopener">1:1 notes<span class="hidden"> (Opens in a new tab)</span></a> by <a href="https://www.notion.so/@notion" target="_blank" rel="noreferrer noopener">Notion<span class="hidden"> (Opens in a new tab)</span></a>
- <a href="https://www.notion.so/templates/notions-editorial-calendar" target="_blank" rel="noreferrer noopener">Notion's editorial calendar<span class="hidden"> (Opens in a new tab)</span></a> by <a href="https://www.notion.so/@notion" target="_blank" rel="noreferrer noopener">Notion<span class="hidden"> (Opens in a new tab)</span></a>
- <a href="https://www.notion.so/templates/product-requirement-document-prd" target="_blank" rel="noreferrer noopener">Product requirement document (PRD)<span class="hidden"> (Opens in a new tab)</span></a> by <a href="https://www.notion.so/@notion" target="_blank" rel="noreferrer noopener">Notion<span class="hidden"> (Opens in a new tab)</span></a>
- <a href="https://www.notion.so/templates/job-search-and-cover-letter-template-with-ai" target="_blank" rel="noreferrer noopener">Job Search & Cover Letter Template (with AI)<span class="hidden"> (Opens in a new tab)</span></a> by <a href="https://www.notion.so/@katie-i" target="_blank" rel="noreferrer noopener">Katie I<span class="hidden"> (Opens in a new tab)</span></a>

Don't forget to <a href="https://www.etsy.com/de-en/search?q=notion" target="_blank" rel="noreferrer noopener">check Etsy for an even larger collection of beautiful templates for Notion<span class="hidden"> (Opens in a new tab)</span></a>. ✨✨✨

## (Almost) Free widgets

Now that we can put aside our worries for the stylish and organizational bits of our notes, let's embellish our dashboards with some widgets! Yes, *widgets babeeeee* 😆

A few websites offer you the possibility to register and take advantage of a few free widgets; in this era of everything montly-subscribed, it's actually nice to find something good you can use for free without having to make monthly or yearly commitments.

<a href="https://indify.co/" target="_blank" rel="noreferrer noopener">Indify.co<span class="hidden"> (Opens in a new tab)</span></a> offers a small yet great customizable set of free widgets (*minus the life progression one, that one's creepy* - I have no need to know how much life I have left 🤔, k thx) that will make your dashboard look extremely professional with only a few clicks. 

<figure>
  <img src="https://images.ctfassets.net/hzu7wkrk7tly/10Ps8KvyxKTlP4pHPDxtOO/41fa27de627010b80e1b205f655b7d40/indify_widgets.png?w=1500&fm=avif&r=50" class="big-picture" />
<figcaption>
A set of free and premium widgets from <a href="https://indify.co/" target="_blank" rel="noreferrer noopener">Indify.co<span class="hidden"> (Opens in a new tab)</span></a>. Among their offering, they have custom buttons, clocks, counters and (for a fee) an integration with Google Calendar.
  </figcaption>
  </figure>

While my greedy ass wishes for more widgets like these (but seriously, let us customize the life progression bars widget 😂), I commend Indify for the amazing work and will periodically check for new things!

<figure>
  <img src="//images.ctfassets.net/hzu7wkrk7tly/4142X5crnpnCOqYUZft7CA/a36be83ca3bab931f357e8c9667ff460/Screenshot_2023-07-27_at_15.20.16.png?h=400&fm=avif&r=50" />
<figcaption>
Some example widgets from <a href="https://indify.co" target="_blank" rel="noreferrer noopener">Indify.co<span class="hidden"> (Opens in a new tab)</span></a>: buttons and counters.
  </figcaption>
  </figure>

Following similar steps (and similarly life progression bars approach for whatever reason), <a href="https://widgetbox.app" target="_blank" rel="noreferrer noopener">WidgetBox<span class="hidden"> (Opens in a new tab)</span></a> offers a slightly bigger collection of widgets, with the minus however that only three of them are free.

<figure>
        <img src="https://images.ctfassets.net/hzu7wkrk7tly/5CyZxTNk3o6nT5c7Qta3U7/545ced96a5935d7e4c8f390b83ab7476/Screenshot_2023-07-27_at_22.14.42.png?h=400&fm=avif&r=50" class="big-picture" />
        <figcaption>
            Some example widgets from <a href="https://widgetbox.app/" target="_blank" rel="noreferrer noopener">WidgetBox<span class="hidden"> (Opens in a new tab)</span></a>: time and calendar.
        </figcaption>
    </figure>

There are a lot of services that provide nice widgets for Notion, but as I scroll through various collections I realize that this would also be an interesting project to create my custom widgets. Perhaps in the future I'll also try to create my own set of customizable widgets :D

## Level up the database game

Notion.so databases give you a dynamic system to organize your notes efficiently: you can store, manage, and retrieve a wide array of data types, from text and images to files and find back everything you want by sorting, filtering, and custom views.

While I won't dive too much into the general topic, I recommend everyone yet unfamiliar with databases to <a href="https://www.notion.so/help/what-is-a-database" target="_blank" rel="noreferrer noopener">check the official Notion.so documentation about what is a database<span class="hidden"> (Opens in a new tab)</span></a> to clarify any further doubt, so that we can proceed with some lesser-known features of databases.

<figure>
        <img src="https://images.ctfassets.net/hzu7wkrk7tly/5rKtV7STao8jTHm1Dq1mS6/e1ff3382260956fe89aa03c73d934c7f/notion_database_view.png?w=1500&fm=avif&r=50" class="big-picture" />
        <figcaption>
            Example of a <a href="https://notion.so" target="_blank" rel="noreferrer noopener">Notion.so<span class="hidden"> (Opens in a new tab)</span></a> database table.
        </figcaption>
</figure>

<a href="https://thomasjfrank.com" target="_blank" rel="noreferrer noopener">Thomas Frank<span class="hidden"> (Opens in a new tab)</span></a> gives us a neat <a href=" https://thomasjfrank.com/notion-databases-the-ultimate-beginners-guide/" target="_blank" rel="noreferrer noopener">ultimate beginners guide to Notion databases<span class="hidden"> (Opens in a new tab)</span></a>, where I would recommend checking what he calls <a href="https://thomasjfrank.com/notion-databases-the-ultimate-beginners-guide/#forcingfunctions" target="_blank" rel="noreferrer noopener">forcing fuctions<span class="hidden"> (Opens in a new tab)</span></a>.

### Forcing functions

Long story short, *forcing functions* are those actions you want to automate every time you add an entry to your database. Say that you're just starting with your database of movies, you might start with those that you've already seen recently and at least for the time being, while you keep submitting new entries, you want your *Seen recently* column to be automatically checked.

If this explanation doesn't quite hit it off with you, have a look at the example on Thomas Frank's website. (Really, just go there, it's a good site! 😁) And if I haven't yet convinced you about how good the site is, check also his section about __formulas__.

### Formulas

In Notion (like Excel and Google Spreadsheet), a formula allows you to perform a variety of operations like calculations, text manipulations, date/time calculations, logical comparisons and anything else that can be written with logic. You can create a formula within a database property by choosing "Formula" as the property type, as simple as that!

If formulas look intimidating and words like *syntax*, *string*, *concatenate* seem vague, I recommend checking <a href="https://www.notion.so/help/formulas" target="_blank" rel="noreferrer noopener">official Notion.so guide about formulas<span class="hidden"> (Opens in a new tab)</span></a>, as once again, they have explained it better than I ever could.

And once you're familiar with the terminology, let's have a look at some of the most common formulas you might want for your database :D

#### Percentage Calculation

Say you're tracking your reading progress in a book, and you have properties for *Total Pages* and *Pages Read*, you can calculate the percentage of the book you've read using the following formula:

```javascript
prop("Pages Read") / prop("Total Pages") * 100
```

#### Conditional Text Formatting
You could have a database of tasks with a *Priority*, with options like *High*, *Medium*, *Low*. You could then create a *Status* formula field to change the display text based on the selected priority:

```javascript
if(prop("Priority") == "High", "😱 High Priority", if(prop("Priority") == "Medium", "😅 Medium Priority", "😇 Low Priority"))
```

This will output different texts with emojis based on the task's priority.

You might notice that it's constituted by two ternary operators:

```javascript
if (prop("Priority") == <something>, <what happens if true>, <what happens if false>)
```

Unfortunately, as of now it seems that Notion doesn't offer the classic `switch()` case that most programming language have, meaning that if you want to show more than two different outputs you'll have to do some nesting.

#### Date Aging

You might have a *Last Contacted* date field in a CRM system and want to track how long it's been since you've last contacted each person. The following formula will calculate the number of days since the *Last Contacted* date:

```javascript
round(dateBetween(now(), prop("Last Contacted"), "days"))
```

This formula calculates the difference between today's date `now()` and the "Last Contacted" date in days.

#### Age Calculation

If you have a *Birth Date* field, you can calculate a person's age with this formula:

```javascript
floor(dateBetween(prop("Birth Date"), now(), "years"))
```

#### Text Concatenation

You can concatenate, as in join together, text from different fields. For example, if you have a *First Name* and *Last Name* field, you can create a *Full Name* field with a formula:

```javascript
prop("First Name") + " " + prop("Last Name")
```

This will create a new text that combines the first name and last name, separated by a space.

#### Date Calculation

You might have a *Start Date* and an *End Date* in your project tracker. You can create a formula to automatically calculate the duration of each project:

```javascript
dateBetween(prop("End Date"), prop("Start Date"), "days")
```

This will calculate the difference between the end date and start date in days.

## Web Clipper extension

Found an interesting blog post, a recipe, or an article you want to read later? Install the <a href="https://chrome.google.com/webstore/detail/notion-web-clipper/knheggckgoiihginacbkhaalnibhilkk" target="_blank" rel="noreferrer noopener">Notion Web Clipper extension for Chrome<span class="hidden"> (Opens in a new tab)</span></a> to save everything you want to later check comfortably from Notion!

Just click the Web Clipper extension button, choose the page in Notion where you'd like to save the content, and voila! The page link, title, and a brief description are instantly saved in Notion.

This is pretty neat for keeping track of useful resources you find online that you might want later to write about *wink wink, guess what I do* 😁

## Wrapping up

'tis nothing but a scratch in all the features and resources Notion has to offer. I hope this article inspired those that were on the fence with Notion to give it a go, and for those that already use it to consider to use it some more with its neat features!

## Coming next

I'm plannint to write more in the future about <a href="https://developers.notion.com/" target="_blank" rel="noreferrer noopener">the Notion.so API<span class="hidden"> (Opens in a new tab)</span></a> as well as how to write your own Notion widgets, so stay tuned! 😁

If there's something you feel I should've mentioned, don't hesitate mentioning it in the comment section!


Notion.so is a versatile productivity tool that can help you organize your thoughts, manage your tasks, and collaborate with others all in one place!

Make the most out of Notion.so

Custom

Apps

Productivity

<a href="https://www.freepik.com/free-psd/3d-female-character-with-question-marks_13678520.htm" target="_blank" rel="noreferrer noopener">Puzzled person<span class="hidden"> (Opens in a new tab)</span></a> and <a href="https://www.freepik.com/free-vector/realistic-3d-shapes-floating-background_13397766.htm" target="_blank" rel="noreferrer noopener">Background 3d composition<span class="hidden"> (Opens in a new tab)</span></a> by <a href="https://www.freepik.com/author/freepik" target="_blank" rel="noreferrer noopener">Freepik<span class="hidden"> (Opens in a new tab)</span></a>, <a href="https://www.freepik.com/free-psd/website-coding-icon-3d-illustration_28638422.htm" target="_blank" rel="noreferrer noopener">Cute round interface<span class="hidden"> (Opens in a new tab)</span></a> by <a href="https://www.freepik.com/author/ekayasadesign" target="_blank" rel="noreferrer noopener">Ekayasa.Design<span class="hidden"> (Opens in a new tab)</span></a>

React issues

From version 16.8 of react, we have had the honours of using hooks to lighten up our codebase, and bring state and lifecycle methods only to the components that require it, making the class component structure not needed anymore and allowing us to use and reuse the prepacked hooks as well as the ones we make ourselves :D

While today we're not talking in details about <a href="https://react.dev/reference/react" target="_blank" rel="noreferrer noopener" title="Hooks, React official documentation website">what is a Hook, which you can find in React official documentation website<span class="hidden"> (Opens in a new tab)</span></a>, we will spend a bit more time discussing about the common misuses of the ever so popular __useEffect hook__ that most of us know and love for its versatility.

The __useEffect hook__ is a feature of React that allows us to perform *side effects* in functional components. This can include things like modifying the DOM, fetching data, or subscribing to event listeners.

<blockquote>In JavaScript, <mark>a <strong>side effect</strong> is like an action that changes something outside its own function.</mark> Think of it as altering a global setting, updating a web page element, or requesting data online.</blockquote>

The useEffect hook in React gives you a simplified way to manage these actions in function components, bypassing the need for class-based components, simplifying overall the writing and understanding of the code and also boosting the app performance by dodging needless re-renders.

It also allows you to specify a cleanup function, which is called when the component is unmounted, to prevent memory leaks and other issues.

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

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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

There are several common mistakes that developers make when using the useEffect hook in React. Between newsfeeds, videos and personal experiences, I've seen a few cases more often than others; let's go through some of those together :D

## 1. Failing to include a cleanup function

Sometimes we might need to take into account that an user might resize the browser window, and that things like sub-menus or advertising banners need to contemplate such resize and behave accordingly; we might be easily tempted to do the following

```javascript
import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    function handleResize() {
      console.log(window.innerWidth);
    }

    window.addEventListener('resize', handleResize);
  }, []);

  return (
    <div>
      Resize the window and check your console to see the changes.
    </div>
  );
}

export default MyComponent;

```

... and kinda be okay with it.

(In this code, our component uses useEffect to add an event listener to the window whenever the component mounts. The listener logs the window's inner width whenever the window is resized.)

But there's a problem - if the component unmounts, the event listener will still be there, potentially causing memory leaks. This is where the cleanup function comes in. __By returning a function from our useEffect__, we're telling React to call this function when the component is about to unmount.

```javascript
import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    function handleResize() {
      console.log(window.innerWidth);
    }

    window.addEventListener('resize', handleResize);

    // Add a cleanup to remove the eventListener
    // when the component is dismounted
    return () => {
      window.removeEventListener('resize', handleResize);
    }
  }, []);

  return (
    <div>
      Resize the window and check your console to see the changes.
    </div>
  );
}

export default MyComponent;

```

Adding a simple `return() => { ... }` to your useEffect will make sure that the EventListener that checks the window resize will be removed and that it will not take its toll when there's no more need for it.

<hr />

## 2. Failing to use the dependencies' array

In the previous example, as we always wanted at every resize to track the new inner width of the browser window, we didn't need to be concerned with the array of dependencies of useEffect. In a lot of other rather common scenarios, however, we want our useEffect to be triggered when specific values change.

Let's say you have a component that fetches some user data based on a __userId__ prop, and displays whether the user is online or not based on an __isOnline__ state. You would want to refetch this data whenever `userId` or `isOnline` change. We could do something like this (omitting TypeScript for simplicity):

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isOnline, setIsOnline] = useState(false);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`/api/user/${userId}`);
      const data = await response.json();
      setUser(data);

      if (data.status === "online") {
        setIsOnline(true);
      } else {
        setIsOnline(false);
      }
    }

    fetchData();
  // Our dependency array including the values we want to watch over
  }, [userId, isOnline]); 

  return (
    <div>
      <h1>{user ? user.name : 'Loading...'}</h1>
      <p>{isOnline ? 'Online' : 'Offline'}</p>
    </div>
  );
}

export default UserProfile;

```

The useEffect hook has `[userId, isOnline]` as its dependency array. This means that the `fetchData` function will be called not only when the component first mounts, but also whenever `userId` or `isOnline` change.

If you forget to include a dependency in the array, or include the wrong dependency, it can cause your effect to be run more or less frequently than intended:
- if you leave the array of dependencies empty, __the effect will only run once__ (...which for some cases it might be what you're looking for)
- if you add all the dependencies your editor might suggest you, __you might end up re-rendering the component more than you need__, making your app slow or with undesired outcomes - don't let the editor tell you better on this one xD

## 3. Not using `AbortController` when dealing with fetch requests

Building up from our previous example, if the component `UserProfile` would render as a result of a click on a list of users, one potential problem could be that our component could receive *old data* as a result of a delayed response.

<figure>
<img src="https://images.ctfassets.net/hzu7wkrk7tly/54yeQjNQt8GpP3STw50eVp/72ab886def596041e89e3e63a8d340bc/delayed_requests.gif" alt="Representation of an interface where clicking on different list items (user profiles) too fast might result in misleading UI results. User #1 information will load with no issues; User #2 information will still be loading as the fetch request is still on its way, User #3 information will be only briefly displayed, as finally User #2 request is fulfilled." />
  <figcaption>Representation of an interface where clicking on different list items (user profiles) too fast might result in misleading UI results. User #1 information will load with no issues; User #2 information will still be loading as the fetch request is still on its way, User #3 information will be only briefly displayed, as finally User #2 request is fulfilled.</figcaption>
</figure>

(Yay, a gif!)

We got ourselves in a very unfavorable race condition.

<blockquote>A <strong>race condition</strong> is a situation in programming where the behavior of a piece of code depends on the relative timing of multiple threads/processes.</blockquote>

Race conditions often appear when working with Promises, asynchronous functions, or any kind of deferred execution, such as setTimeout or setInterval. These issues can be mitigated by properly managing the flow of execution in asynchronous operations (for example, using async/await or chaining Promises with then).

So how do we prevent our UI from showing the response of a delayed and outdated request?! You know it, `AbortController` is here to save the day :D

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isOnline, setIsOnline] = useState(false);

  useEffect(() => {
    // Create an AbortController
    const abortController = new AbortController(); 

    async function fetchData() {
      try {
        // We use abortController in our fetch request to keep track
        // of a potential abort signal
        const response = await fetch(`/api/user/${userId}`, { signal: abortController.signal });

        if (!response.ok) {
          throw new Error(response.status);
        }

        const data = await response.json();
        setUser(data);

        if (data.status === "online") {
          setIsOnline(true);
        } else {
          setIsOnline(false);
        }
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          console.error('An unexpected error happened:', error);
        }
      }
    }

    fetchData();

    return () => {
      // Now if userId or isOnline change, the useEffect cleanup will
      // trigger the abortController and stop any ongoing fetch request
      // connected to it
      abortController.abort();
    };
  }, [userId, isOnline]);

  return (
    <div>
      <h1>{user ? user.name : 'Loading...'}</h1>
      <p>{isOnline ? 'Online' : 'Offline'}</p>
    </div>
  );
}

export default UserProfile;
```

In this updated code
- we create a new `AbortController` instance before the fetch request
- the `signal` property from the `AbortController` is passed to the fetch options
- the `abort()` method is called in the cleanup function returned by useEffect, causing the fetching to be canceled

Basically now, if the userId changes before the fetch has completed, the fetch for the previous userId will be cancelled to prevent setting state on an unmounted component or outdated fetch requests. And well, another great way to prevent memory leaks.

I'd definitely recommend have a look <a href="https://developer.mozilla.org/en-US/docs/Web/API/AbortController" target="_blank" rel="noreferrer noopener">at the documentation for AbortController on mdn web docs<span class="hidden"> (Opens in a new tab)</span></a>, as there you get to see all sorts of examples and exhaust any curiosity about it!

One of my favourite youtubers, <a href="https://www.youtube.com/@WebDevSimplified/about" target="_blank" rel="noreferrer noopener">Web Dev Simplified<span class="hidden"> (Opens in a new tab)</span></a>, has put this issue in better words than either I or ChatGPT will ever manage, so head out to watch his video about <a href="https://youtu.be/GGo3MVBFr1A?t=1015" target="_blank" rel="noreferrer noopener">Top 6 React Hook Mistakes Beginners Make<span class="hidden"> (Opens in a new tab)</span></a>, you'll have a great explanation I promise!

<iframe width="100%" height="400" src="https://www.youtube-nocookie.com/embed/GGo3MVBFr1A?start=1015" data-embed-title="Top 6 React Hook Mistakes Beginners Make" data-embed-url="https://www.youtube.com/watch?v=GGo3MVBFr1A&start=1015" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

<hr />

## 4. Relying on the order of useEffect calls

__The order in which useEffect calls are executed is not guaranteed__, meaning that we should definitely not rely on the order of useEffect calls to determine the behavior of your components.

Let's say we have a blog website where we fetch user information and the user's blog posts. We might be tempted to separate the data fetching into multiple useEffects for better separation of concerns:

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState(null);

  // Fetch user data
  useEffect(() => {
    fetch(`/api/user/${userId}`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [userId]);

  // Fetch user posts
  useEffect(() => {
    fetch(`/api/posts?userId=${userId}`)
      .then(response => response.json())
      .then(data => setPosts(data));
  }, [userId]);

  return (
    <div>
      <h1>{user ? user.name : 'Loading user...'}</h1>
      <h2>{posts ? `Posts: ${posts.length}` : 'Loading posts...'}</h2>
    </div>
  );
}

export default UserProfile;
```

While this separation may seem neat, it could lead to unnecessary multiple renders and potential issues with race conditions (one fetch completing before the other).

A better approach might be to combine the two fetch calls into a single useEffect:

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState(null);

  // Fetch user data and user posts
  useEffect(() => {
    fetch(`/api/user/${userId}`)
      .then(response => response.json())
      .then(data => {
        setUser(data);
        return fetch(`/api/posts?userId=${userId}`);
      })
      .then(response => response.json())
      .then(data => setPosts(data));
  }, [userId]);

  return (
    <div>
      <h1>{user ? user.name : 'Loading user...'}</h1>
      <h2>{posts ? `Posts: ${posts.length}` : 'Loading posts...'}</h2>
    </div>
  );
}

export default UserProfile;
```

In this version, the single useEffect first fetches the user data, then it fetches the user's posts, leaving us with more control over the sequence of events, reducing the number of re-renders and the risk of race conditions.

<hr />

## 5. Not using useEffect at all

Some junior developers may not be aware of the useEffect hook, or may not understand when it is appropriate to use it.

### Performing side effects in the render function

Some of those instances might look as such:

```typescript
// Bad practice
function UserProfile({ userId }) {
  // Fetch will happen in the render
  const user = fetch(`/api/users/${userId}`);

  return <div>{user.name}</div>;
}
```

__The render function in React should be pure__, which means it shouldn't cause any side effects like API calls, subscriptions, or timeouts/intervals. This is because React might call the render function more times than you expect, and having side effects in the render function can lead to unexpected behavior.

And to prevent all that bad, we can simply make use of our friends useEffect and useState:

```typescript
// Better practice
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [userId]);

  return <div>{user ? user.name : 'Loading...'}</div>;
}

```

### Not Handling Dependent State Correctly

When state depends on props or another state, it might need to be updated inside a useEffect to ensure it stays in sync, otherwise we might not see updated values.

```typescript
// Bad practice
function SquareArea({ edge }) {
  // Initial value of squared depends on props
  const [squared, setSquared] = useState(edge * edge);

  return <div>{squared}</div>;
}
```

While this might initially appear okay, the problem is that the initial state of squared is set based on the value prop, but useState only sets the initial state once when the component is first rendered. So if the value prop changes in the future, squared will not get updated, because useState does not track the updates of value.

To overcome that, we can do:

```typescript
// Better practice
function SquareArea({ edge }) {
  const [squared, setSquared] = useState(edge * edge); 

  // Update the state when edge changes
  useEffect(() => {
    setSquared(edge * edge);
  }, [edge]);

  return <div>{squared}</div>;
}
```

Our beloved useEffect will take care of updating `squared` every time the `edge` prop will change :D

<hr />

As we can see, useEffect is a powerful tool we can take advantage of to make our apps snappy and sharp, but we need to be wary on how we use it if we don't want to have headaches trying to debug our own mistakes. 🤯

Let me know if I forgot to mention something!


Let's get to know the common weaknesses in using one of our favourite features of React: useEffect! 

Common useEffect mistakes

React

JavaScript

Accessibility

__Accessibility__ refers to the design of products, devices, services and environments in a way that makes them available and __usable by as many people as possible__, regardless of their abilities (or disabilities).

Apps (short for __Applications__) are software programs designed to perform specific tasks or functions. There are a wide variety of apps available and the journey to discover them is endless!

Comics

Cool stuff from the various lands of comics.

Content Creation

__Content creation__ encapsules software and methodologies that one might find useful in writing, illustrations and in several other activities.

CoolWebsites

A collection of cool websites I found around the web.

CSS, or __Cascading Style Sheets__,  is a language used to style and layout web pages. It separates a web page's presentation from its content, allowing for greater flexibility and consistency in design. CSS defines styles for HTML elements and is a fundamental technology for creating attractive and user-friendly websites.

Development

__Development__ captures a wide spectrum of topics in the realm of software and web development, including but not limited to coding languages, frameworks, methodologies, best practices, tools, and technologies. It's a place for enthusiasts, professionals, and beginners alike to explore and discuss all aspects of the development process, from idea conception to deployment and maintenance.

Disqus

__Disqus__ is a widely-used online platform that provides a unique commenting system for websites and blogs. With its centralized discussion community feature, it facilitates social engagement and interaction among users by enabling them to comment, like, and reply to posts on various web pages.

ELI5

Explain like I am 5. The best things you'll usually find on Reddit when you seek for simple explanations about all sorts of things.

Fonts

A __font__ is a set of characters, symbols, and numbers that share a consistent design and style. Fonts are used to display text in a visually appealing way and can range from simple and minimalistic to intricate and decorative.

For those that are not so keen on the design side of things, choosing fonts might be a daunting task.

Inspiration

Everything that inspires me gets this tag! There's really no rationale on what you'll find under this!

__JavaScript__, often used in combination with __HTML and CSS__, helps developers create powerful, interactive user experiences on the web. It's a versatile language that can be used to build a wide range of __both client-side and server-side applications__.

Next.js

__Next.js__ is an open-source JavaScript framework built on top of React.js, designed to simplify and optimize the development of web applications. Offering features such as server-side rendering, static site generation, and automatic code-splitting, Next.js facilitates fast, SEO-friendly, and highly performant applications. It supports both client and server-side data fetching to render the necessary data for each page, enabling developers to create hybrid applications combining the best aspects of single page applications (SPAs) and traditional multi-page applications. Moreover, Next.js also allows deployment to any hosting provider due to its ability to export the application as a static site. Its easy-to-use nature and versatility have made it an increasingly popular choice among developers globally.

__Notion.so__ is an __all-in-one workspace tool__ that helps you write, plan, collaborate, and organize, essentially offering a unified platform for notes, tasks, wikis, and databases.

Prettier

__Prettier__ is a popular and powerful code formatting tool used in software development to ensure consistent and aesthetically pleasing code styles across projects. By automating the code formatting process, Prettier eliminates the need for developers to manually adjust indentation, spacing, and other formatting aspects and its opinionated approach to code formatting guarantees a uniform codebase.

__Managing time__, __prioritizing tasks__, and __using resources effectively__ to achieve what we set ourselves on are all different names of productivity. Improving personal productivity is beneficial for our __own sense of satisfaction and achievement__. Let's find the tools that can help us own back our life.

Quantum

__Quantum computing__ is the use of quantum-mechanical occurences, like __superposition__ and __entanglement__, to perform computation in a significantly faster way than classical binary computing.

Raycast

Raycast is a __game-changing productivity tool__ that revolutionizes the way you work and enhances your efficiency to new heights. This powerful software acts as a virtual command center, streamlining your daily tasks and seamlessly integrating with your existing workflows. With Raycast, you'll experience a whole new level of productivity, allowing you to accomplish more in less time.

__React__ is a powerful, declarative JavaScript library for __building user interfaces__ that are fast, scalable, and easy to maintain, making it a top choice for developers building modern web applications. As any technology, there are good and not-so-good ways to use React in a project: let's try to stash up on the __good practices__!

Tailwind

__Tailwind__ is a popular utility-first CSS framework that helps developers quickly and easily build responsive and custom-designed user interfaces. Instead of relying on pre-built UI components, Tailwind provides __a set of low-level utility classes that can be combined__ to create any design imaginable. This approach allows for greater flexibility and customization, while also reducing the amount of custom CSS required.

Technology

__Technology__ plays a central role in many aspects of modern life and has had a profound impact on the way we communicate, work, and live. With this term, we often encompass a __multitude of products and services__ and their development in regards of the __hardware and software__ created around those.

Typescript

__TypeScript__ is a statically typed superset of JavaScript that adds optional type annotations, providing enhanced tooling, improved code organization, and increased scalability to JavaScript projects.

UI/UX

UI and UX are both important concepts in the design of digital products such as websites and mobile apps. __User Interface__ (UI) refers to the __visual and interactive components of a product__, encompassing the look and feel of the product, as well as its layout, typography, and color scheme. __User Experience__ (UX), on the other hand, is concerned with how easy and pleasant the product is to use, __how well it meets the user's needs and expectations__, and how it makes them feel, encompassing the overall experience of using the product, including both functional and emotional aspects. Good UI and UX design are critical to creating digital products that are easy to use, intuitive, and engaging for users.

oh-no.ooo

Articles

Discover by tags

Make the most out of Notion.so

Common useEffect mistakes