DEV Community: Jacopo Marrone @tresorama

Dynamic HTML Tag in React Components with the "as" prop

Jacopo Marrone @tresorama — Thu, 21 Nov 2024 15:59:06 +0000

Imagine you're building a reusable <Section> component with React. The Section component renders an HTML <div> tag because you hardcoded it. However, in some cases, you might want to use an other tag instead, for example a <section> HTML tag.

This is a typical scenario when you want your HTML to be more semantic and SEO friendly.

The solution is to let the consumer decide which HTML tag should be used to render the component.

The "as" prop

This is nothing new.

It's an industry standard "approach" that allows you to dynamically decide which HTML tag should be used to render the component. A lot of React Components library use it, like Chakra UI and Material UI.

Without the "as" prop, you'd need to create separate components for each use case, and it makes no sense. Don't do it!

This is how you consume the "as" prop

import { Section } from './section';

const App = () => {
  return (
    <div>
      <Section as="section">CTA</Section>
      <Section as="article">My Article</Section>
      <Section>This use the default HTML tag of the component</Section>
    </div>
  );
};

And this is the component definition

type SectionProps = {
  as?: React.ElementType,
  children: React.ReactNode,
}

export const Section = (props: SectionProps) => {

  const { as: Tag = 'div', children } = props;

  return <Tag>{children}</Tag>;

}

Typescript Support for the "as" prop

React helps us with Typescript types.

Using the typescript's React.ElementType type, provided by React, you will obtain autocomplete for your IDE, like this

As an alternative to React.ElementType you can use

type SectionProps = {
  as?: keyof JSX.IntrinsicElements,
  children: React.ReactNode,
}

type SectionProps = {
  as?: keyof HTMLElementTagNameMap,
  children: React.ReactNode,
}

How to remove duplicates in Postgres SQL

Jacopo Marrone @tresorama — Tue, 19 Nov 2024 16:46:37 +0000

Crossposted on my blog
You can read it here

Our schema

create table "post" (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  content TEXT NOT NULL
);

create table "user" (
  id SERIAL PRIMARY KEY,
  name VARCHAR(255) NOT NULL
)

create table "post_like" (
  id SERIAL PRIMARY KEY,
  post_id INTEGER NOT NULL REFERENCES post(id),
  user_id INTEGER NOT NULL REFERENCES user(id)
)

Now we want to ensure that each user cannot like the same post more than once.
This can be prevented by:

using a unique constraint on the pair post_id + user_id columns of the post_like table.
or removing the id column of the post_like table and use a composite primary key on post_id + user_id

But, assuming we are at a point where duplicates are already there, we need to remove them.

Check if there are duplicates

select 
  post_id, 
  user_id,
  count(*)
from post_like
group by post_id, user_id
having count(*) > 2
;

| post_id | user_id | count |
| ------- | ------- | ----- |
| 3       | 2       | 2     |

This output tells us that user 2 has liked post 3 more than one time, specifically 2 times.

Remove duplicates

Now that we know that there are duplicates, we can remove them.

We split this process in two step:

read duplicates
remove duplicates (dry run)
remove duplicates (real run)

Read duplicates

Transaction rollback

To test our queries without removing real data, until we are sure the query is correct, we use the transaction rollback feature.

By doing this our query will never be committed, is similar to the
"dry run" concept that you can find on other applications (like
rsync).

CTE

We use CTE because it provides a good DX.

With CTE, we can run a query, store the results in a temporary table, and then use the same table for subsequent queries.

This mental model is similar to what we usually do in coding by creating a temporary variable.

The CTE syntax is
 with 
 <cte_name> as (
   <query>
 ),
 <cte_name_2> as (
   <query_2> -- here we can refernce <cte_name>
 )
 <final_query> -- here we can refernce <cte_name> and <cte_name_2>

With both transaction and CTE, we can do the following:

begin; -- start transaction

with
duplicates_info as (
  select
    row_number() over (
      partition by post_id, user_id order by user_id
    ) as group_index,
    id,
    post_id,
    user_id
  from post_like
)
select *
from duplicates_info
;

rollback; -- ends transaction discarding every changes to the database

| group_index | id | post_id | user_id |
| ----------- | -- | ------- | ------- |
| 1           | 1  | 1       | 1       |
| 1           | 2  | 2       | 2       |
| 1           | 3  | 3       | 2       |
| 2           | 4  | 3       | 2       |

The latest row of results, where group_index is 2, means that this row is the second one in the group with post_id = 3 and user_id = 2.

What happens here with the syntax?

row_number() over (partition by ...) as group_index is a window function that, first group rows by the columns in the partition by clause, and then assigns a number to each row, based on the index of the row in the group.

partition is similar to group by, because it groups the rows by a common column, but if group by return only 1 row for each group, partition let us add new columns to the source table based on groups.

group_index is a column name alias, regular sql syntax.

Filter only duplicates

Now let's keep only items with group_index > 1, which means that the row is not the first one in the group, or in other words, it is a duplicate.

begin; -- start transaction

with
duplicates_info as (
  select
    row_number() over (
      partition by post_id, user_id order by user_id
    ) as group_index,
    id,
    post_id,
    user_id
  from post_like
)
select *
from duplicates_info
+ where group_index > 1
;

rollback; -- ends transaction discarding every changes to the database

| group_index | id | post_id | user_id |
| ----------- | -- | ------- | ------- |
| 2           | 4  | 3       | 2       |

We need to remove only this row, with id 4.

Remove duplicates - dry run

Now rewite the final query so that we read from post_like table and not anymore from the cte duplicates_info.
We still use the cte duplicates_info to get the id of the duplicates.

begin; -- start transaction

with
duplicates_info as (
  select
    row_number() over (
      partition by post_id, user_id order by user_id
    ) as group_index,
    id,
    post_id,
    user_id
  from post_like
)
- select *
- from duplicates_info
- where group_index > 1
+ select *
+ from post_like
+ where id in (
+  select id from duplicates_info
+  where group_index > 1
+ )
;

rollback; -- ends transaction discarding every changes to the database

We will see the records that we want to remove.

After we checked that they are correct, we swap select with delete.

begin; -- start transaction

with
duplicates_info as (
  select
    row_number() over (
      partition by post_id, user_id order by user_id
    ) as group_index,
    id,
    post_id,
    user_id
  from post_like
)
- select *
+ delete
from post_like
where id in (
 select id from duplicates_info
 where group_index > 1
)
+ returning * -- will output deleted rows
;

rollback; -- ends transaction discarding every changes to the database

This last query is what we finally want to execute.

But becuase we still have rollback statement, these chhanges are simulated, and not applied to the database.

Remove duplicates - real run

Finally we can remove the duplicates for real.
Here we use commit instead of rollback, so that the changes are applied to the database.

begin; -- start transaction

with
duplicates_info as (
  select
    row_number() over (
      partition by post_id, user_id order by user_id
    ) as group_index,
    id,
    post_id,
    user_id
  from post_like
)
delete
from post_like
where id in (
 select id from duplicates_info
 where group_index > 1
)
returning * -- output deleted rows
;

- -- ends transaction discarding every changes to the database 
- rollback; 

+ -- ends transaction applying changes to the database
+ commit;

Final Code

-- start transaction
begin; 

with
duplicates_info as (
  select
    row_number() over (
      partition by post_id, user_id order by user_id
    ) as group_index,
    id,
    post_id,
    user_id
  from post_like
)
delete
from post_like
where id in (
 select id from duplicates_info
 where group_index > 1
)
returning * -- output deleted rows
;

-- ends transaction discarding every changes to the database 
-- rollback; 

-- ends transaction applying changes to the database
commit;

Conclusion

I write articles mainly to help future myself or to help the growth of tools I use in my work.

If this article was helpful to you leave a like.

Would you like me to talk about a particular topic?

Tell me in the comments !

Essential CLI commands

Jacopo Marrone @tresorama — Mon, 25 Mar 2024 23:04:17 +0000

Crossposted on my blog
You can read it here

Terminal vs Shells

Terminal and shells are not the same things, even if they are used as synonymous.

Command must be written in the syntax expected by your shell.

This article is written for zsh shell, the one I'm using in my Mac.

CLI General Reminders

File extensions are not necessary for "doing things", extensions are used to mark which format the information is written in. Outside CLI context, extensions are used by the OS to pick an appropriate Application and use it to open a file. In CLI context they "are just the final part of the file name", so when you create a script file it's good practice to include an extension that indicate that is a script (.sh .command .script)
Which folder you are in does not count, but :
- when referencing file path using a "relative" approach, the starting point is your current folder (knows as cwd, current working directory)
- when referencing file path using a "relative" approach, it is irrelevant.

Commands

Here is a list of essential CLI commands for your daily tasks...

Print absolute path of current directory

# pwd (print working directory)
pwd

Show files/folder of a directory

# show files of current directory
ls
# show files of other directory
ls path/to/directory
# show as list (easily scannable)
ls -l
# include hidden files
ls -a

Show the file tree of a directory

# Install the "tree" command if on MacOS
brew install tree

# show tree with depth level = 1
tree -L 1

# output
.
├── Summer_Forest.mp4
├── dummy-assets
├── prove
├── text.txt
└── screenshot

# show tree with depth level = 2
tree -L 2

# output
.
├── Summer_Forest.mp4
├── dummy-assets
│   ├── artist
│   ├── images
│   └── travel
├── prove
│   ├── Schermata 2023-07-16 alle 20.33.14.png
│   ├── Schermata 2023-07-16 alle 20.33.22.png
│   ├── Schermata 2023-09-14 alle 21.56.02.png
│   ├── Schermata 2024-01-21 alle 17.56.25.png
│   ├── Schermata 2024-01-24 alle 21.57.38.png
│   ├── Schermata 2024-02-09 alle 18.39.27.png
│   ├── Schermata 2024-02-09 alle 18.39.54.png
│   ├── Schermata 2024-02-09 alle 18.55.26.png
│   ├── Schermata 2024-02-28 alle 10.39.45.png
│   ├── Schermata 2024-02-28 alle 13.06.00.png
│   ├── Schermata 2024-02-28 alle 14.41.22.png
│   ├── Schermata 2024-03-03 alle 16.29.49.png
│   ├── Schermata 2024-03-04 alle 17.11.15.png
│   ├── Schermata 2024-03-04 alle 18.05.51.png
│   ├── Schermata 2024-03-08 alle 17.50.21.png
│   ├── Schermata 2024-03-09 alle 15.36.57.png
│   └── Schermata 2024-03-11 alle 13.50.38.png
├── text.txt
└── screenshot
    ├── Schermata 2024-01-30 alle 17.28.04.png
    └── Schermata 2024-02-26 alle 14.52.17.png

Go to a directory

Change current directory with provided one

# go to dir (named "dirName") that is child of current directory
cd dirName 
# go to dir (named "dirName") knowing its absolute path
cd /absolute/path/to/dirName
# go to parent directory
cd ..
# go to home directory
# in MacOS home directory is /Users/your-name
cd ~

Create a directory

# create a new directory named "dirName" as child of current dir
mkdir dirName

Create a file

# create a new file named "fileName" as child of current dir
touch fileName

Edit a file with a text editor

# with "nano" text editor
nano fileName.txt
# with "vs code" text editor
code fileName.txt
# with "vim" text editor
vi fileName.txt
# with "micro text editor
micro fileName.txt

Open a file with the default app used by the OS

# open a file named "fileName" with OS default app
open fileName.png

Show in Finder/File Explorer a directory

# show current dir (do not miss the dot)
open .
# show a dir using absolute path
open /abs/path/to/dir

Conclusion

I write articles mainly to help future myself or to help the growth of tools I use in my work.

If this article was helpful to you leave a like.

Would you like me to talk about a particular topic?

Tell me in the comments!

Terminal vs Shell

Jacopo Marrone @tresorama — Mon, 25 Mar 2024 23:02:05 +0000

Crossposted on my blog
You can read it here

Terminal and Shell are not the same things but are commonly used interchangeably to refer to the the same concept: doing things with a CLI (command line interface).

Which is the difference between Terminal and Shell?

I like analogies to understand concepts, so when talking about Terminal and Shell these are what comes to my mind...

Analogy with VideoGames Emulator

If you want to play old Pokemon games in 2024, you have 2 options

Buy a Nintendo GameBoy Color/Advance and the game cartridge
Download an Emulator software on your PC and download the game file (ROM)

Opting for the Emulator...

You launch the Emulator, you decide which Console simulate and then you launch the game you want to play.
Similarly, When you launch a Terminal, you decide which Shell execute and then launch your commands by typing with the keyboard.

An Emulator can execute multiple Consoles.
A Terminal can execute multiple Shells.

If Consoles are GameBoy Color, GameBoy Advance...

Shells are zsh, bash...

Analogy with Node and PHP

If you are familiar to Javascript and Node.js you know that you can "execute" js code by writing js code inside a file and then execute it by opening a Terminal and doing

node script.js

node is the executable that parse the script.js, interprets it and executes it.

Same things with PHP

php script.php

php is the executable that parse the script.php, interprets it and executes it.

Going back to Terminal vs Shell, you can think that when you do

echo 'a text portion'

under the hood this pseudo code happens

shell "echo 'a text portion'"

So the shell (like node and php in previous example) interprets and execute the code.

Common Shells

Common shells in MacOS are zsh, and bash.

Other shells are:

sh
csh
dash
ksh
tcsh

Which shell I'm using right now?

To check which shell is currently running you can run

echo $0
# output
zsh

# not working? try these
ps -p $$

Which shells are installed?

To check which shells are installed you can run

cat /etc/shells

# output

# List of acceptable shells for chpass(1).
# Ftpd will not allow users to connect who are not using
# one of these shells.

/bin/bash
/bin/csh
/bin/dash
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh

How to change shell for current session?

To change which shell is currently running you can run

# launch a "bash" shell
bash

# print current running shell
echo $0 
# bash

# print default shell for current user
echo $SHELL
# /bin/zsh

# exit shell
exit

...or...

# launch a zsh shell
zsh

# print current running shell
echo $0 
# zsh

# print default shell for current user
echo $SHELL
# /bin/zsh

# exit shell
exit

As you noted, this will not change the default shell for your user, but it will change the shell for the current CLI session only.

How to check and change default shell?

When you open the "Terminal" app on your OS, that programs launch the "shell" configured as default for your user.

Every user has a default shell defined.

You can check which is the default shell for you user by running

echo "$SHELL"

# /bin/zsh

# In my case the default is "zsh", 
# and the binary/executable path for "zsh" is /bin/zsh.

Then list shells path that you can use with

cat /etc/shells

# List of acceptable shells for chpass(1).
# Ftpd will not allow users to connect who are not using
# one of these shells.

/bin/bash
/bin/csh
/bin/dash
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh

And update the default shell with

# change to "sh" shell
chsh -s /bin/sh

# or, change to "bash" shell
chsh -s /bin/bash

Conclusion

I write articles mainly to help future myself or to help the growth of tools I use in my work.

If this article was helpful to you leave a like.

Would you like me to talk about a particular topic?

Tell me in the comments !

Maybe you don't know that Javascript can conditionally import

Jacopo Marrone @tresorama — Wed, 24 May 2023 15:05:56 +0000

For a side project, I was creating a personal blog starter.
Without going into details, it's a Next.js project that use SSG to create every pages at build time.
You can decide "how and where" you write and store your articles.
The choice is between these datasources :

Flat File (version-controlled markdown file in a sub dir of the repo)
Notion Database

Both datasource are coded as an object with a type signature shared by every datasource, so that the view layer is decoupled from the real datasource implementation.

Both "flat-file" and "notion" strategies have code implementaion, this implementaion is located in different location inside the repo folder structure.
In case you use "notion" strategies, it is not necessary that the code imports the "flat file" code becasue it will be never used, and viceversa.

To solve this problem, at the beginning you must open a file and comment/uncomment a line of code, like this:

// 1. when notion is the choice
// import { flatFileDatasource as datasource } from './strategies/flat-file';
import { notionDatasource as datasource } from './strategies/notion';

export datasource;

... or ...

// 2. when flat file is the choice
import { flatFileDatasource as datasource } from './strategies/flat-file';
// import { notionDatasource as datasource } from './strategies/notion';

export datasource;

It works. But is not comfortable.

What if I can conditionally import a module or an other ?!??

Well, Javascript covers this case.

Dynamic Import

This syntax

import {something} from './someplace';

is known as static import.

But javascript has also a dynamic and async import feature

import('./someplace').then(module=>console.log(module));

that returns a promise with the imported module object.

Of course when you export a promise, who imports it must await before utilizing its resolved value, so you must adjust some other code as well.

Here is a generic example

// file: ./fancy-lib.ts

export let getLib: () => Promise<FancyLibType>;

if (today === 'monday') {
  getLib = () => import('./monday').then(module => module);
}
else if (today === 'friday') {{
   getLib = () => import('./friday').then(module => module);
}
else {
  throw new Error(`No libraries for ${today} day`);
} 


// file: ./consumer-of-fancy-lib.ts
import { getLib } from './fancy-lib';

const manipulation = async () => {
  const myLib = await getLib();
  // ... rest of the code
}

Conclusion

Dynamic import lets you import modules based on conditions that are computed at runtime, opening the possibility to avoid loading unnecessary code.

Due to the nature of the feature, that utilizes Promise, some other code needs to be updated as async as well.

And you?
Have you ever used dynamic import?
Do you have a static alternative for conditional import? Feel free to share.

Resources

MDN - import - static

MDN - import() - dynamic

Advanced Tailwind Syntax

Jacopo Marrone @tresorama — Mon, 22 May 2023 14:31:06 +0000

It's common to use Tailwind with classes like m-4 bg-red-500 that use the theme tokens.

Tailwind Docs is well done and covers everything.

But when you need to write CSS that doesn't use theme, you are using the tailwind syntax for arbitrary rules.

This is when you can find this cheat sheet useful.

tailwind-syntax-examples.vercel.app

Feel free to suggest something that is missing...

Advanced Tailwind Syntax - Old

Jacopo Marrone @tresorama — Mon, 22 May 2023 02:07:20 +0000

It's common to use Tailwind with classes like m-4 bg-red-500 that use the theme tokens.

Tailwind Docs is well done and covers everything.

But when you need to write CSS that doesn't use theme, you are using the tailwind syntax for arbitrary rules.

This is when you can find this cheat sheet useful.

tailwind-syntax-examples.vercel.app

Feel free to suggest something that is missing...

Learning Vue as a React dev

Jacopo Marrone @tresorama — Wed, 17 May 2023 01:47:09 +0000

I work daily with React. In recent days I decided to try Vue for the first time.

I enjoyed the experience, so I decided to share my thoughts.

Frontend Framework

Do you know Create React App? Class Components? React Hooks? Next.js?

Great, so you know why their Vue equivalent exists.

To scaffold a project with a lot of DX stuff already configured, React has Create React App, Vue has Vue CLI. Recently, both Create React App and Vue CLI are in maintenance mode. Now is recommended to use Vite for both, unless you use a meta framework (Next.js and Nuxt).

React has Class Components and Vue has Options API. React has React Hooks and Vue Composition API. React has Next.js and Vue Nuxt.js.

Key differences, React vs Vue

The ecosystem

React is a library, Vue is a framework.

This means that Vue has a wider set of official tools, integrated as a whole "framework". React, on the other end, need to be extended by third-party tools.

In Vue, the core team defines the way, in React, the community drives everything.

I'm not saying that Vue doesn't have an active community, but that Vue team guides a lot more than React one.

What do I mean by "ecosystem"?

Think about these common "parts" of a frontend app:

Client Side Routing, which handles the navigation between different pages of your app, even if the browser never redirects actually (the core of a SPA, Single Page Application)
Global State Management, which handles the share of state between multiple components without passing props down to every level of the app tree.

How do you solve them?

The Vue team authored Vuex and Pinia for Global State Management, and Vue Router for Client Side Routing.

React has no official tools, but this means that a lot of third-party good libraries have emerged over time to fill the gap. Like Redux for Global State Management and React Router or Reach Router for Client Side Routing.

Think about this as ...

React gives the world an essential building block for handling reactivity in a Frontend App and, but has no official way to structure the rest of the app, leaving this duty to the community.

Vue instead gives the reactivity system and also a toolbelt with a solid opinion on how to handle everything, so there is an official package for every common problem.

No best or worst.

Both are great declarative libraries, with a good DX.

Don't be a blind fanboy :)

The render runs only once

In react, a render function or a function component re-runs after every state changes.

React compare the result with the current DOM state and decide if to "reconcile" or not.

Instead, in Vue, the template (the render function equivalent) is run only once.

I don't know much about how internal works in Vue, but if you put a console.log inside the script portion of a template it will run only once.

No need for dependencies array

Vue reactivity system is different from React one.

In React you must optimize your code using useMemo , useCallback and other things to avoid unnecessary computation and bugs.

I'm referring mainly to the dependencies array.

In Vue all these duties are in charge of the library.

Vue takes care of analyzing and understanding when a piece of code, that depends on some reactive values needs to be recalculated.

No need to define dependencies.

Beginners could find this a winning point in favor of Vue.

A brief history of Vue

History

Vue.js was first released in February 2014 by ex-Google engineer Evan You.

It is an open-source progressive JavaScript framework used for building user interfaces (UIs) and single-page applications.

The Options API was the original API for Vue.js.

The Composition API was introduced later in Vue 3.0, which was released in September 2020.

Evolution: Options API and Composition API

Let's be honest, 99,9% of React nowadays is written in hook style. But imagine that in your work you inherit a legacy project written in Class Components... better you don't feel lost.

So a React beginner should spend a little bit of time on Class Components even if the standard way of writing React is with Hooks.

The same with Vue.

Don't you agree? Let me know it.

Vue initial API is now called "Options API" and is considered legacy.

Vue 3 introduced a new style of writing Vue, that is now the standard,and it is known as "Composition API".

React has had the same evolution, with React Hooks as successor of Class Components.

Compare Vue and React

Take this React class component

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);

    // decalare local state
    this.state = {
      count: 0
    };

    // bind "this" to event handlers
    this.handleIncrementClick = this.handleIncrementClick.bind(this);
    this.handleDecrementClick = this.handleDecrementClick.bind(this);
  }

  // define event handlers
  handleIncrementClick() {
    this.setState({ count: this.state.count + 1 });
  }
  handleDecrementClick() {
    this.setState({ count: this.state.count - 1 });
  }

  // render the template
  render() {
    return (
      <div>
        <h1>Counter: {this.state.count}</h1>
        <button onClick={this.handleIncrementClick}>+</button>
        <button onClick={this.handleDecrementClick}>-</button>
      </div>
    );
  }
}

In this class component, we define a state object that includes a count property, which will hold the current value of the counter. We also define two methods, handleIncrementClick and handleDecrementClick, which increment and decrement the count property of the state object, respectively.

In the render method, we display the current value of count in an h1 element, and we include two buttons that call the handleIncrementClick and handleDecrementClick methods, respectively, when clicked. When either button is clicked, the count property of the state object is updated, which triggers a re-render of the component and updates the displayed value of the counter.

This is the Vue counterpart in Options API

<template>
  <div>
    <h1>Counter: {{ count }}</h1>
    <button @click="incrementCount">+</button>
    <button @click="decrementCount">-</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    incrementCount() {
      this.count++;
    },
    decrementCount() {
      this.count--;
    }
  }
}
</script>

The data function must return an object that is the local state.

Under methods, you defined incrementCount and decrementCount. Vue under the hood takes care of "binding" the this instance to "methods" handlers, so we don't have to. In addition, updating the local state is done in a mutable fashion, instead of React's immutable.

Vue uses Proxy under the hood, so, in reality, you are not mutating the "real" state object but the proxied one. But from a developer's point of vue view it's less code.

But the overall component code is almost identical.

Ok, this was Class Components vs Options API.

Now let's take a look to React Hook vs Composition API.

React

const Counter = () => {
  const [count, setCount] = React.useState(0);
  const incrementCount = () => setCount(prev => prev+1);
  const decrementCount = () => setCount(prev => prev-1);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={incrementCount}>+</button>
      <button onClick={decrementCount}>-</button>
    </div>
  )
}

Vue Composition API

<script setup>
import {ref} from 'vue';

const count = ref(0);
const incrementCount = () => count.value++;
const decrementCount = () => count.value--;
</script>

<template>
  <div>
    <h1>Counter: {{count}}</h1>
    <button @click="incrementCount">+</button>
    <button @click="decrementCount">-</button>
  </div>
</template>

They look similar.

For a good description of the entire reactivity system of Vue read Template Syntax and Reactivity Fundamentals. This is not a tutorial, so take a look there if something is not clear...

The Vue way

It's time to explore some Vue distinctive stuff, that makes it different from React.

v-model

Take this React code that renders an input

const InputComponent = () => {
  const [inputValue, setInputValue] = useState('');
  const handleChange = (e) => setInputValue(e.target.value)

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
      />
      <p>You entered: {inputValue}</p>
    </div>
  )
}

... and look it in Vue with Composition API

<script setup>
import {ref} from 'vue';
const inputValue = ref('');
</script>

<template>
  <div>
    <input type="text" v-model="inputValue" />
    <p>You entered: {{ inputValue }}</p>
  </div>
</template>

... and Options API

<template>
  <div>
    <input type="text" v-model="inputValue" />
    <p>You entered: {{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
}
</script>

A lot less code.

Great, don't you think???

v-model does all the boring stuff of the Two-Way Data Binding between template and component instance.

This is a great DX improvement of Vue, when compared to React.

Can I use the React way? Yes, in Vue you can use the React "way" if you want.

<script setup>
  const inputValue = ref('');
</script>

<input
  :value="inputValue"
  @input="(event) => inputValue.value = event.target.value"
/>

computed

Computed data, is data that is derived from the state, and should be automatically recalculated on every state update.

Let's augment the Counter example with a doubledCount derived value.

In React

const Counter = () => {
  const [count, setCount] = React.useState(0);

  const doubledCount = count * 2;
  // here a useMemo version if computation is expensive
  // const doubledCount = useMemo(() => count * 2, [count]);

  const incrementCount = () => setCount(prev => prev+1);
  const decrementCount = () => setCount(prev => prev-1);

  return (
    <div>
      <h1>Count: {count}</h1>
      <h1>Doubled Count: {doubledCount}</h1>
      <button onClick={incrementCount}>Increment</button>
      <button onClick={decrementCount}>Decrement</button>
    </div>
  );
}

...in Vue Composition API

<script setup>
import {ref, computed} from 'vue';
const count = ref(0);
const doubledCount = computed(() => count.value * 2); 
</script>

<template>
  <div>
    <h1>Count: {{ count }}</h1>
    <h1>Doubled Count: {{ doubledCount }}</h1>
    <button @click="incrementCount">Increment</button>
    <button @click="decrementCount">Decrement</button>
  </div>
</template>

... and Options API

<template>
  <div>
    <h1>Count: {{ count }}</h1>
    <h1>Doubled Count: {{ doubledCount }}</h1>
    <button @click="incrementCount">Increment</button>
    <button @click="decrementCount">Decrement</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubledCount() {
      return this.count * 2;
    }
  },
  methods: {
    incrementCount() {
      this.count++;
    },
    decrementCount() {
      this.count--;
    }
  }
}
</script>

You can think of "computed" as useMemo without dependency.

Not so much difference between React and Vue here.

Emitting events

Think about a parent component, that renders a child component and wants to be notified when the child is clicked.

In React you "pass" down a function via props.

import React from 'react';

const ChildComponent = ({ onClick }) => (
  <button onClick={onClick}>Click me!</button>
);

const ParentComponent = () => {
  const handleChildClick = () => {
    console.log('Child is clicked!!!!!');
  }

  return (
    <div>
      <h1>Hello, world!</h1>
      <ChildComponent onClick={handleChildClick} />
    </div>
  );
}

in Vue instead you "emit" an event (like in native DOM elements) from the child component and "listen" to that event in the parent component.

This is Vue Composition API

<script setup>
import { defineEmits } from 'vue';

// define all event that this component can emit...
const emits = defineEmits(['clicked']);

const handleClick = () => {
  emits('clicked');
}
</script>

<template>
    <button @click="handleClick">Click me!</button>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

const handleChildClick = () => {
  console.log('Child is clicked!!!!!');
}
</script>

<template>
 <div>
    <h1>Hello, world!</h1>
    <ChildComponent @clicked="handleChildClicked" />
  </div>
</template>

... and Options API

<template>
  <div>
    <h1>Hello, world!</h1>
    <ChildComponent @clicked="handleChildClicked" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: "ParentComponent",
  // 
  // this registration of "components" is required 
  // before using a child component with Options API.
  components: {
    ChildComponent
  },
  methods: {
    handleChildClicked() {
      console.log('Hello');
    }
  }
}
</script>

<template>
  <button @click="handleClick">Click me!</button>
</template>

<script>
export default {
  name: "ChildComponent",
  methods: {
    handleClick() {
      this.$emit('clicked');
    }
  }
}
</script>

The idea of emitting an event has the advantage that from the ChildComponent code there is no need to check if his parent has provided a function or not (like you would do in react when the "onClick" prop is optional).

The child emits the event anyway, and if someone is listening to it will be notified.

Conclusion

I started learning Vue with Options API, founding it a bit verbose compared to React Hooks.

But when tried Composition API I felt at home.

The code is readable and without a "class-like" boilerplate, and the overall experience is great.

Vue has some "magic", that makes code easier to read.

The only downside is that it feels weird to write js code inside quotes like it was a string as happens in HTML attributes.

And you?

What do you think about Vue?

Do you prefer it over React?

Why?

Publish a Typescript React library to NPM in a monorepo

Jacopo Marrone @tresorama — Sat, 21 Jan 2023 05:23:20 +0000

Crossposted on my blog
You can read here

In this blog post we create a small React library and publish it to NPM.

We'll go through all steps required to do that.

Let's begin.

Overview

The library we will publish (package from now on) is written in Typescript, bundled with tsup, versioned and published with changeset.

To test the package we create one example app with Next.js and one with Vite.

To better manage these three apps (our package + Next.js demo + Vite demo) we store everything in a monorepo, using turborepo.

The Package

It will be named use-last-visit-date and will contain a React hook used to:

Retrieve date of last visit, that was previously saved to localStorage.

Tutorial

1. Create a monorepo

This guide will not cover how a monorepo works, if this concept is new to you can read a little about it to get the idea.

If you want to skip that, you should know that for this guide i opted to monorepo only to be able to have the package itself and demo apps in the same codebase.

Otherwise i should have created 3 separate repo.

Let's go!

Setup

Tool used: turborepo, pnpm

To create a new monorepo, use create-turbo and follow the prompt.

NOTE:

If you don'have pnpm installed you can install it following installation guide

You can also use yarn or npm if you want.

# create a monorepo
npx create-turbo@latest

# answers
? Where would you like to create your turborepo? ./use-last-visit-date
? Which package manager do you want to use? pnpm

Turborepo will init the monorepo and print

>>> Created a new turborepo with the following:

 - apps/web: Next.js with TypeScript
 - apps/docs: Next.js with TypeScript
 - packages/ui: Shared React component library
 - packages/eslint-config-custom: Shared configuration (ESLint)
 - packages/tsconfig: Shared TypeScript `tsconfig.json`

>>> Success! Created a new Turborepo at "use-last-visit-date".

Good to know

turborepo expose an executable turbo that can fire a script in each workspace with a specific name.

For instance, running turbo build from root of monorepo will execute build script in every workspace.

If a workspace hasn't a build script, that workspace will be ignored.

In which order they are executed ?

turbo.json is the file where this configuration takes place.

Default setting will be enough for this guide, but i encourage you to read documentation later on.

Clean up

Rename root package.json name to "root-monorepo" to avoid collision with package we are going to create.
Delete apps/docs directory, we'll not use it

2. Create package workspace

To create our package run :

# go to root of the monorepo
cd ./use-last-visit-date

# create package directory
mkdir packages/use-last-visit-date
cd pacakges/use-last-visit-date

# init the package with pnpm
pnpm init

# install needed dev dependencies
pnpm add -D react react-dom @types/react @types/react-dom

Add tsconfig

We are using typescript so we need a tsconfig file.

Fortunately, turborepo already created a shared tsconfig internal package for us.

Inside there are various configuraion ready to be extended.

This is one of the beauties of using a tool like turborepo.

Add tsconfig as a dev dependency

# in packages/use-last-visit-date/package.json

"devDependencies": {
+  "tsconfig": "workspace:*",
}

Reinstall dependencies in whole monorepo

pnpm install

Create a tsconfig.json in packages/use-last-visit-date with this content

{
  "extends": "tsconfig/base.json",
  "include": ["."],
  "exclude": ["dist", "node_modules"],
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"]
  }
}

Write code

Create the file which will contain our code

# run this from packages/use-last-visit-date
touch ./index.ts

and fill with

import { useEffect, useState } from 'react';

const storage = {
  key: 'last-visit-date',
  save: (value: string) => window.localStorage.setItem(storage.key, value),
  retrieve: () => window.localStorage.getItem(storage.key) ?? null,
}

export const useLastVisitDate = () => {
  const [lastVisitDate, setLastVisitDate] = useState<null | string>(null);

  // On page load retrieve the last visit date if exists
  useEffect(() => {
    const value = storage.retrieve();
    setLastVisitDate(value);
  }, []);

  // On page close save current date
  useEffect(() => {
    const handler = () => {
      const currentDate = new Date().toISOString();
      storage.save(currentDate);
    }
    window.addEventListener('beforeunload', handler);
    return () => {
      window.removeEventListener('beforeunload', handler);
    }
  }, []);

  return lastVisitDate;
}

Then update which file will be exported by opening packages/use-last-visit-date/package.json and

- "main": "index.js",
+ "main": "./index.ts",

It's time to test our code in a real react app.

3. Create demo app workspace - Next

turborepo has already created a Next.js app in apps/web so there is no need to do it.

Because later on we will create also a Vite app, let's add a better name to this Next.js app.

Rename apps/web dir to apps/next and update apps/next/package.json :

- "name": "web",
+ "name": "next",

Then consume the useLastVisitDate hook in pages/index.tsx

const formatDate = (d: string) => {
  const date = new Date(d);
  return date.toLocaleString();
};

export default function Page() {
  const lastVisitDate = useLastVisitDate();

  return (
    <div>
      <h1>
        {lastVisitDate === null && "Hello, it's first time you visit us !"}
        {lastVisitDate && `Last Visit: ${formatDate(lastVisitDate)}`}
      </h1>
    </div>
  );
}

But this will throw an error because useLastVisitDate is not defined, and it's correct because we haven't imported it yet.

Before we can import it we must add the use-last-visit-date to dependencies of apps/next.

So update apps/next/package.json:

"dependencies": {
-  "ui": "workspace:*"
+  "use-last-visit-date": "workspace:*"
}

and tell pnpm to "refresh" monorepo dependencies by running

# is not important from "where" you run this command
pnpm install

Now you can import the hook in pages/index.tsx

// Add at the top
import { useLastVisitDate } from 'use-last-visit-date';

and errors should disappears.

NOTE:

If this is not happening, try Restarting TS server in your code editor.

Now it's time to test if it's working.

# run this from apps/next
pnpm dev

And open http://localhost:3000.

You should see

Hello, it's first time you visit us !

Then refresh the page and text should be changed to

Last Visit: ......

4. Create demo app workspace - Vite

Move with shell to root of monorepo and

# go to apps dir
cd apps

# create a vite workspace
pnpm create vite vite-react --template react-ts

# install dependencies
pnpm install

Then consume the useLastVisitDate hook in src/App.tsx

const formatDate = (d: string) => {
  const date = new Date(d);
  return date.toLocaleString();
};

export default function Page() {
  const lastVisitDate = useLastVisitDate();

  return (
    <div>
      <h1>
        {lastVisitDate === null && "Hello, it's first time you visit us !"}
        {lastVisitDate && `Last Visit: ${formatDate(lastVisitDate)}`}
      </h1>
    </div>
  );
}

But this will throw an error because useLastVisitDate is not defined, and it's correct because we haven't imported it yet.

Before we can import it we must add the use-last-visit-date to dependencies of apps/vite-react.

So update apps/vite-react/package.json:

"dependencies": {
  ...other-deps,
+  "use-last-visit-date": "workspace:*"
}

and tell pnpm to "refresh" monorepo dependencies by running

# is not important from "where" you run this command
pnpm install

Now you can import the hook in src/App.tsx

// Add at the top
import { useLastVisitDate } from 'use-last-visit-date';

and errors should disappears.

NOTE:

If this is not happening, try Restarting TS server in your code editor.

Now it's time to test if it's working.

# run this from apps/vite-react
pnpm dev

And open http://localhost:5173.

You should see

Hello, it's first time you visit us !

Then refresh the page and text should be changed to

Last Visit: ......

5. Time to publish

Overview

Now, use-last-visit-date is an internal packages, it's written in Typescript and it works because Next.js app and Vite app take care of compiling the code to js.

But our code should run also if these assumptions are not in place.

We need to compile to js.

Then we can publish to NPM.

To recap, publish a package to NPM consists of two steps:

Bundle and compile source code to commonjs, so who install our packge will be able to import it
Set up a dev script for local development.
Publish to NPM
- Control versioning
- Control publishing

Bundle and Compile

Tools used: tsup

First, go with shell to packages/use-last-visit-date and

# install tsup as dev dependency
pnpm add -D tsup

# create a src dir
mkdir src

# move index.ts to src dir
mv index.ts src/index.ts

Then add a script to packages.json in packages/use-last-visit-date

{
  "scripts": {
+   "build": "tsup src/index.ts --format cjs --dts"
  }
}

This script,will use tsup to bundle and compile our code, and outputs files to the dist directory.

Because of that, you should:

add dist to your .gitignore at root of monorepo to avoid push it when git pushing.
update package.json main property, so who install this packages will use the bundled+compiled version of code.

# in packages/use-last-visit-date/package.json

- "main": "./index.ts",
+ "main": "./dist/index.js",
+ "types": "./dist/index.d.js",

Because this package is a react package, while developing we need react and react-dom installed as dev dependencies.

But we don't want to inject the whole react code inside our package when it's bundled and compiled.

What we want is to let consumer of package install it.

So, add peer dependencies to package.json in packages/use-last-visit-date

+  "peerDependencies": {
+      "react": ">=18.2.0",
+      "react-dom": ">=18.2.0"
+  },

Set up workflow for local development

Before adding tsup, apps inside apps directory was importing directly the source code file (with .ts extension).

So, when we updated the source code file, our apps received the updates.

Now we added a compile step in between, so we need to trigger a new build every time we update source code.

To do that, update package.json in packages/use-last-visit-date

{
  "scripts": {
    "build": "tsup src/index.ts --format cjs --dts"
+   "dev": "pnpm run build --watch"
  }
}

From now on, while developing, we'll use dev script.

Let's test a complete local development workflow.

Go to root of monorepo with shell and run

pnpm dev

This will trigger dev script of every workspace that has a dev script, in our case:

packages/use-last-visit-date
apps/next, available at http://localhost:3000
apps/vite-react, available at http://localhost:5173

Try to change something in use-last-visit-date code and watch updates.

Publish to NPM

Every time you update source code, you want that this changes will be published as a new version.

You want also a place where to condense description of changes linked to every new version.

You can do it manually, but is very tedious and error prone.
Better to use a tool created for this.

This is when changeset enter the pitch.

Configure changeset

From root of the monorepo

# install changeset
pnpm add -w @changesets/cli

# setup
pnpm changeset init

Create 1.0.0 version

Set version to 0.0.1 in packages/use-last-visit-date/package.json

"version": "0.0.1"

Then use the versionig tool of changeset

# run this from root monorepo
pnpm changeset

# a prompt start

? Which packages would you like to include?
# select "use-last-visit-date" with arrows and space
# then press enter

? Which packages should have a major bump?
# select "use-last-visit-date" with arrows and space
# then press enter

? Are you sure you want to release the first major version of use-last-visit-date?
# confirm it

Please enter a summary for this change (this will be in the changelogs).
# write a description
# like "First release"
# then press enter

?Is this your desired changeset?
# confirm it

# bump version number
# running
pnpm changeset version

Now version should be 1.0.0.

Publish

Before publish check that every packages in your monorepo that MUST NOT be published has

"private": true

in its package.json.

This prevent them to be published to NPM.

Then update ./.changeset/config.json

- "access": "restricted",
+ "access": "public",

And....
Finally...
We can publish our package

pnpm changeset publish

Done!

Conclusion

I write articles mainly to help future myself or to help the growth of tools I use in my work.

If this article was helpful to you leave a like.

Would you like me to talk about a particular topic ?

Tell me in the comments !

Git remove file from not last commit

Jacopo Marrone @tresorama — Fri, 11 Nov 2022 13:24:52 +0000

Crossposted on my blog
You can read here

CAUTION

Before continue we need to understand that this will break the Git history.

This means that after the fact, in case the commit in question was already pushed you will need to overwrite it with git push --force, and every repo co-worker will need to git pull --force.

Git and Ethereum, somewhat similar

Git has a chain of commits, called history.
Ethereum/Bitcoin has a chain of blocks, called blockchain.

Every commit (Git) or block (Ethereum) has a parent commit/block, so when you edit a block/commit you will change also its children.

Only what precedes the changed commit/block remains identical, all that follows will be a new thing.

This it's why they say "Git rebase rewrites history".

Note that in practice is not possibile to edit a commit, you can only overwriting it with a different version of it.

Git History and blockchain are both immutable.

Going back to our problem

My problem is that i've scraped some date on the Web and saved this data on a .json file, this file size is 220MB, and Github let us upload files with a limit of 100MB per file.

remote: error: File XXX is 220.00 MB; this exceeds GitHub's file size limit of 100 MB

But i became aware of that only when i tried to push the repo.
So i need to remove that file from my Git history.

Git History

This is the Git History of this example.

e6cfcb4 (HEAD -> main) build: update docs about docker adminer # OK
d817a6c feat(api): get-XXX-by-id now use internal data         # OK
9176b01 feat: seed database with scraped data  # 👈 WRONG ONE
c1301d1 build: install ts-node for running scripts             # OK
8c26fd5 feat: add XXX model to db                              # OK
e51acdb refactor: folder structure                             # OK
e0f1c7f build: add env.example                                 # OK
a7d7e34 feat: vote persists in db                              # OK
f32d6c4 build: imported shadow-database docker instance        # OK
987a245 build: implement prisma with first migration           # OK
...

We need to :

keep all commit previous to 9176b01
edit 9176b01 commit , removing the unwanted file
commit a new version of 9176b01 with changes
recreate all untouched commits after 9176b01

Git rebase interactive

I could be wrong if i say that this is the only way to resolve this problem, I am only a regular developer that stackoverflows when need some help, like all of us 😎.

If you know other solutions or has suggestions write them in the comments !

Anyway, let's start.

Start

As a recap, the wrong commit is 9176b01,
and last commit before the wrong one is c1301d1.

# Start rebasing from last correct commit
git rebase -i c1301d1

Git will ask instruction on the rebase process.

pick 9176b01 feat: seed database with scarped data
pick d817a6c feat(api): get-XXX-by-id now use internal data
pick e6cfcb4 build: update docs about docker adminer

# Rebase c1301d1..e6cfcb4 onto c1301d1 (3 commands)
#
# Commands:
# p, pick <commit> = use commit
# r, reword <commit> = use commit, but edit the commit message
# e, edit <commit> = use commit, but stop for amending
# s, squash <commit> = use commit, but meld into previous commit
# f, fixup [-C | -c] <commit> = like "squash" but keep only the previous
#                    commit's log message, unless -C is used, in which case
#                    keep only this commit's message; -c is same as -C but
#                    opens the editor
# x, exec <command> = run command (the rest of the line) using shell
# b, break = stop here (continue rebase later with 'git rebase --continue')
# d, drop <commit> = remove commit
# l, label <label> = label current HEAD with a name
# t, reset <label> = reset HEAD to a label

We must tell Git which commit we want to preserve and which ones we want to edit.
So we tell Git we want to edit 9176b01 by swapping pick with edit.

edit 9176b01 feat: seed database with scarped data
pick d817a6c feat(api): get-XXX-by-id now use internal data
pick e6cfcb4 build: update docs about docker adminer

# Rebase c1301d1..e6cfcb4 onto c1301d1 (3 commands)
#
# Commands:
# ...

Save with :wq and Git tell us

Stopped at 9176b01...  feat: seed database with scraped data
You can amend the commit now, with

  git commit --amend 

Once you are satisfied with your changes, run

  git rebase --continue

Now if we git log --oneline, we see that our last commit is the wrong one, we are back at that point.

Let's remove the unwanted file, by

rm path/to/unwanted-file

Tip:

If you want to keep the file but undo changes made by this wrong commit use git show path/to/changed-file | git apply -R instead of rm path/to/file

In this example both command produces that same effect because the file didn't exists before this commit, so undo is same as delete.

Add changes to staging area with

git add path/to/unwanted-file

and

git commit --amend

Edit the commit message if you want and confirm with :wq.

Then complete the rebase

git rebase --continue

Voilà !

Now we have rewritten the Git history from that point.

Conclusion

I write articles mainly to help future myself or to help the growth of tools I use in my work.

If this article was helpful to you leave a like.

Would you like me to talk about a particular topic ?

Tell me in the comments !

Use tRPC outside React

Jacopo Marrone @tresorama — Thu, 10 Nov 2022 13:28:43 +0000

Crossposted on my blog
You can read here

“[...] The code easiest to maintain is the code that was never written.”

-- Benjamin Franklin

If you agree, you should try tRPC.

tRPC

tRPC is a library that drastically reduce amount of code you need to write to have a fully typed API Layer.

tRPC can be used with many framework, but a common duo is tRPC and Next.js.

If you write backend code in Next.js projects and use Typescript, give a try to tRPC, because it will make you fly.

Typcal tRPC usage pattern with Next.js

Server side, you create a tRPC router and expose it in a Next.js API route.

Client side, you create a React Hooks that can invoke tRPC router procedures.
Then consume the hook in your React Components, in a React Query similar fashion.

But, i need to call tRPC outside React

Many reasons can dictates this:

You want to call the procedure NOT from a React Component
Your views implement a cache layer (stored in client), so only if cache is empty you submit the HTTP request
You use Axios and React Query but you are not ready to replace all React Query hooks with tRPC.useQuery, but you want to replace Axios
You know ...

In my case i've a cache layer on localStorage and i want only to replace my Axios invocations.

tRPC vanilla client comes into play.

tRPC Vanilla Client

Like Axios is a HTTP client, tRPC Vanilla Client is client used to communicate to tRPC procedures from Vanilla js.

tRPC Vanilla Client let you call your tRPC procedures in the same way as trpc.<procedure-name>.useQuery does.

But unlike trpc.<procedure-name>.useQuery does, you are not limited to use inside React Components/Hooks.
You can call it whenever you can call a function that returns a Promise.

Here is how you can replace Axios with it.


// Before
import axios from 'axios';

async function submitFormToServer(formValues: FormValues) {
  console.log('submittin form to server ...');
   try {
    // compose the request DTO
    const dto = {
      title: formValues.title,
      content: formValues.content,
    };
    // submit HTTP request to API Layer
    const response = await axios.post('api/post', dto);

    // parse request result
    if (response.status === 200) {
      console.log('success');
      return { success: true };
    }

    throw new Error(); // falltrough catch

  } catch (error) {
    console.error('error:', error);
    return { success: false }
  }
}


const Page = () => {
  const handleSubmit = async () => {
    const formValues = ....;
    const {success} = await submitFormToServer(formValues);
    ...
  }
  return <form onSubmit={handleSubmit}>...</form> 
}


// After
import {trpcVanilla} from '../utils/trpc';

async function submitFormToServer(formValues: FormValues) {
  console.log('submittin form to server ...');
   try {
    // submit HTTP request to tRPC API Layer
     await trpcVanilla.createPost.mutate({
      title: formValues.title,
      content: formValues.content,
    });
    return { success: true };
  } catch (error) {
    return { success: false };
  }
}




const Page = () => {
  const handleSubmit = async () => {
    const formValues = ....;
    const {success} = await submitFormToServer(formValues);
    ...
  }
  return <form onSubmit={handleSubmit}>...</form> 
}

How to create tRPC Vanilla Client

View Documentation

Example

// in /utils/trpc.ts

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '...path to your tRPC router';

export const trpcVanilla = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: `http://localhost:3000/api/trpc`,
    }),
  ],
});

Conclusion

I write articles mainly to help future myself or to help the growth of tools I use in my work.

If this article was helpful to you leave a like.

Would you like me to talk about a particular topic ?

Tell me in the comments !

React - Don't update parent state in the rendering phase of the child

Jacopo Marrone @tresorama — Wed, 19 Jan 2022 17:14:00 +0000

TLDR;
Don't update parent state in the rendering phase of the child component

Long story

Visualize in your mind this Abstract React tree:

<WebSite>

  <LoadingSpinner />

  <PageContent>
    <A>
      <ASub>
        <ASubSub>
          <LoadingTriggerA />
        </ASubSub>
      </ASub>
    </A>
    <B>
      <BSub>
        <BSubSub>
          <LoadingTriggerB />
        </BSubSub>
      </BSub>
    </B>
  </PageContent>

</WebSite>

The goal is to render a single LoadingSpinner in our whole website, and being able to trigger the LoadingSpinner visibility from LoadingTriggerA and LoadingTriggerB when they need to.

How to solve this without passing functions down the tree - aka “prop drilling“ ?

React Context, using a "useAppLoading" custom hook.

This custom hook takes care of maintaining the visibility state of the Loading component, and to render it.
This hook exposes us a show and a hide function.

In this post we are focused not on the custom hook, but here you can find the code for build a "useAppLoading" custom hook.

import { AppLoadingProvider, useAppLoading } from './my-custom-hook/useAppLoading';

const Website  = () => {
  return (
    <AppLoadingProvider>
      <PageContent  /> // LoadingTriggerA and LoadingTriggerB are descendants of this
    </AppLoadingProvider>
    );
};

const LoadingTriggerA = () => {
   const {showLoading, hideLoading} = useAppLoading();
   ...
   return <div>....</div>;
}

const LoadingTriggerB = () => {
   const {showLoading, hideLoading} = useAppLoading();
   ...
   return <div>....</div>;
}

It seams ok.
But how do we call "show()" and "hide()" functions ???
This is THE POINT of this post.

Maybe like this ??

const LoadingTriggerA = () => {
   const {showLoading, hideLoading} = useAppLoading();
   showLoading();
   return <div>....</div>;
}

const LoadingTriggerB = () => {
   const {showLoading, hideLoading} = useAppLoading();
   hideLoading();
   return <div>....</div>;
}

Try yourself and you will notice that React javascript console triggers an error in the console saying:

Warning:
Cannot update a component (`AppLoadingProvider`) while rendering a different component (`LoadingTriggerA`).
To locate the bad setState() call inside `LoadingTriggerA`,
follow the stack trace as described in https://reactjs.org/link/setstate-in-render

What this means is that, child component can't update one of his parents component's state from within the rendering body.
That's what this warning is telling you.

This is an Anti Pattern because if it was legal, there will be chances that data flow going crazy, and weird stuff will happen, like unnecessary re rendering of the tree.

In our case the Parent is the AppLoadingProvider, which treat LoadingTriggerA and LoadingTriggerB as descendants.

So How to solve that ??

Update the (parent) state inside an useEffect, because useEffect runs after the main rendering phase of a component.

const LoadingTriggerA = () => {
   const [busy, setBusy] = React.useState(false);
   const {showLoading, hideLoading} = useAppLoading();

   React.useEffect(() => {
     if (busy) showLoading();
     else hideLoading();
   }, [busy]);

   return <div>....</div>;
}

Thank you for reading this blog post.
Not clear ? Question ? Ask in comments !!