DEV Community: Clever Lopes

Normalised Tree to handle a complex React nested state of two dynamic lists.

Clever Lopes — Sat, 03 May 2025 05:38:49 +0000

Github Repo My LinkedIn
This environment has been configured using Vite React app and TailwindCSS.

The challenge seems simple. We have a block with a button to add a new item row, one to delete it, one to delete the block, one to add a new block and three inputs.

The static code looks like this:

App.jsx

function App() {
  return (
     <main className=" h-screen overflow-hidden flex flex-col items-center justify-center m-auto bg-stone-800">
      <div className="w-full container">
        <h1 className="text-center text-2xl font-bold text-white">
          Game Logic Editor
        </h1>

     <section className="m-auto w-2/5 p-6 bg-gray-900 rounded-2xl mt-6 flex flex-col gap-4">
      <div className="flex justify-between items-center">
        <h1 className="text-white text-xl font-bold">Item Mechanics Block</h1>
        <button className="text-red-500 text-2xl font-mono font-medium cursor-pointer">
          x
        </button>
       </div>
       <div className="flex max-xl:flex-col max-xl:items-center gap-3 items-end-safe p-4 text-gray-600 bg-slate-700 rounded-2xl">
      <div className="flex flex-col w-full gap-1 ">
        <label htmlFor="type" className="font-medium text-gray-200">
          {ITEM_MECHANICS_LABELS.type}
        </label>
        <select
          name="type"
          id="type"
          defaultValue="select"
          className="bg-white p-2 rounded-lg "
        >
          <option value="select" hidden>
            ...Select
          </option>
          {ITEM_MECHANICS_VALUES.type.map((type, index) => (
            <option key={type + index} value={type}>
              {type}
            </option>
          ))}
        </select>
      </div>
      <div className="flex flex-col w-full gap-1">
        <label htmlFor="effect" className="font-medium text-gray-200">
          {ITEM_MECHANICS_LABELS.effect}
        </label>
        <select
          name="effect"
          id="effect"
          defaultValue="select"
          className="bg-white p-2 rounded-lg"
        >
          <option value="select" hidden>
            -
          </option>
          {ITEM_MECHANICS_VALUES.effect.map((ef, index) => (
            <option value={ef} key={ef + index}>
              {ef}
            </option>
          ))}
        </select>
      </div>
      <div className="flex flex-col w-full gap-1">
        <label htmlFor="usageLimit" className="font-medium text-gray-200">
          {ITEM_MECHANICS_LABELS.usageLimit}
        </label>
        <input
          id="usageLimit"
          type="number"
          min={1}
          max={10}
          className="bg-white rounded-lg p-2"
        />
      </div>
      <div>
        <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded cursor-pointer">
          Delete
        </button>
      </div>
    </div>

        <div className="m-auto">
          <button class="bg-emerald-500 hover:bg-lime-500 text-white px-4 py-2 rounded cursor-pointer">
          Add a new item
          </button>
        </div>
      </section>

      <div className="flex justify-center mt-6">
          <button class="bg-cyan-400 hover:bg-cyan-500 text-white px-4 py-2 rounded cursor-pointer">
            Add a new block
          </button>
      </div>
    </main>
  );
}

export default App;

const ITEM_MECHANICS_LABELS = {
  type: "Item Type",
  effect: "Buff/Debuff",
  usageLimit: "Max Usage",
};

const ITEM_MECHANICS_VALUES = {
  type: ["Weapon", "Armor", "Consumable", "Artifact", "Material"],
  effect: ["Health Boost", "Speed Buff", "Defense Increase", "Attack Damage", "Special Ability"],
};

So let's get started.

Step 1: Break the UI into a component hierarchy

We can break this UI into two components. The block and the item row.

Now the code looks like this:

App.jsx

import { Block } from "./components/Block";

function App() {
  return (
    <main className=" h-screen overflow-hidden flex flex-col items-center justify-center m-auto bg-stone-800">
      <div className="w-full container">
        <h1 className="text-center text-2xl font-bold text-white">
          Game Logic Editor
        </h1>

        <Block />

        <div className="flex justify-center mt-6">
          <button class="bg-cyan-400 hover:bg-cyan-500 text-white px-4 py-2 rounded cursor-pointer">
            Add a new block
          </button>
        </div>
      </div>
    </main>
  );
}

export default App;

Block.jsx

import { Row } from "./Row";

export function Block() {
  return (
    <section className="m-auto w-2/5 p-6 bg-gray-900 rounded-2xl mt-6 flex flex-col gap-4">
      <div className="flex justify-between items-center">
        <h1 className="text-white text-xl font-bold">Item Mechanics Block</h1>
        <button className="text-red-500 text-2xl font-mono font-medium cursor-pointer">
          x
        </button>
      </div>

      <Row />

      <div className="m-auto">
        <button class="bg-emerald-500 hover:bg-lime-500 text-white px-4 py-2 rounded cursor-pointer">
          Add a new item
        </button>
      </div>
    </section>
  );
}

Row.jsx

import { ITEM_MECHANICS_LABELS, ITEM_MECHANICS_VALUES } from "../constants";

export function Row() {
  return (
    <div className="flex max-xl:flex-col max-xl:items-center gap-3 items-end-safe p-4 text-gray-600 bg-slate-700 rounded-2xl">
      <div className="flex flex-col w-full gap-1 ">
        <label htmlFor="type" className="font-medium text-gray-200">
          {ITEM_MECHANICS_LABELS.type}
        </label>
        <select
          name="type"
          id="type"
          defaultValue="select"
          className="bg-white p-2 rounded-lg "
        >
          <option value="select" hidden>
            ...Select
          </option>
          {ITEM_MECHANICS_VALUES.type.map((type, index) => (
            <option key={type + index} value={type}>
              {type}
            </option>
          ))}
        </select>
      </div>
      <div className="flex flex-col w-full gap-1">
        <label htmlFor="effect" className="font-medium text-gray-200">
          {ITEM_MECHANICS_LABELS.effect}
        </label>
        <select
          name="effect"
          id="effect"
          defaultValue="select"
          className="bg-white p-2 rounded-lg"
        >
          <option value="select" hidden>
            -
          </option>
          {ITEM_MECHANICS_VALUES.effect.map((ef, index) => (
            <option value={ef} key={ef + index}>
              {ef}
            </option>
          ))}
        </select>
      </div>
      <div className="flex flex-col w-full gap-1">
        <label htmlFor="usageLimit" className="font-medium text-gray-200">
          {ITEM_MECHANICS_LABELS.usageLimit}
        </label>
        <input
          id="usageLimit"
          type="number"
          min={1}
          max={10}
          className="bg-white rounded-lg p-2"
        />
      </div>
      <div>
        <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded cursor-pointer">
          Delete
        </button>
      </div>
    </div>
  );
}

Step 2: Find the minimal but complete representation of UI state.

The inputs, the inputs row and the block are state because they change over time and can’t be computed from anything.

  const [itemBlocks, setItemBlocks] = useState([0]);
  const [itemRows, setItemRows] = useState([{}]);
  const [item, setItem] = useState({
    type: "",
    effect: "",
    usageLimit: 0,
  });

Naturally, we can represent our state in this way above. And now let's apply it in the components. The modifications:

// App.jsx
      {...}
        {itemBlocks.map((block, index) => (
          <Block 
            key={index}
            block={block}
            item={item}
            itemRows={itemRows}
          />
        ))}
       {...}
// Block.jsx
export function Block({ item, itemRows, block }) {
    {...}
        <h1 className="text-white text-xl font-bold">
            Item Mechanics Block {block + 1}
        </h1>
    {...}
      {itemRows.map((ir, index) => (
        <Row key={index} item={item} />
      ))}
    {...}
}
// Rows.jsx

export function Row({ item }) {
     {...}
        <select
          name="type"
          id="type"
          value={item.type}
          defaultValue="select"
          className="bg-white p-2 rounded-lg "
        >
      {...}
        <select
          name="effect"
          id="effect"
          defaultValue="select"
          value={item.effect}
          className="bg-white p-2 rounded-lg"
        >
       {...}
        <input
          id="usageLimit"
          type="number"
          name="usageLimit"
          min={1}
          max={10}
          value={item.usageLimit}
          className="bg-white rounded-lg p-2"
        />
       {...}
}

With the state created and the props passed, the application looks like this. So now let's add some interactivity.

Step 3: Create the handle functions to manipulate the state and add inverse data flow

The app renders correctly with props and state flowing down the hierarchy. But to change the state according to user input, we will need to support data flowing the other way: the row component deep in the hierarchy needs to update the state in App

The functions are:

  const handleInputsChange = () => {...}

  const handleAddRow = () => {...}
  const handleDeleteRow = () => {...}

  const handleAddBlock = () => {...}
  const handleDeleteBlock = () => {...}

We need to implement the handleInputsChange:

  const handleItemChange = (name, value) => {
    setItem({
      ...item,
      [name]: value,
    });
  };

        {itemBlocks.map((block, index) => (
          <Block
            key={index}
            block={block}
            item={item}
            onItemChange={handleItemChange} // Add in the Block props
            itemRows={itemRows}
          />
        ))}

        // And the Row props
        {itemRows.map((ir, index) => (
         <Row key={index} item={item} onItemChange={onItemChange} /> 
        ))}

Finally, call on the inputs (in the selects in the same way)

      <input
          id="usageLimit"
          name="usageLimit"
          type="number"
          min={1}
          max={10}
          value={item.usageLimit}
          onChange={({ target }) => onItemChange(target.name, target.value)}
          className="bg-white rounded-lg p-2"
        />

And Voilà the inputs now are controlled, the next function is the add and remove item row:

  const handleAddRow = () => {
    setItemRows([
      ...itemRows,
      {
        type: "",
        effect: "",
        usageLimit: 0,
      },
    ]);
  };

Now we just add as props to the block and call on the Add item row button and:

Done! But now we face the following problem:

The inputs values are mirrored, but this can be easily resolved by adding an ID to the item state and nesting it with the rows:

  const [itemRows, setItemRows] = useState([{
    id: crypto.randomUUID(),  
    type: "",
    effect: "",
    usageLimit: 0,
  }]); 

  const handleItemChange = (id, name, value) => {
    setItemRows(itemRows.map((item) => {
      if (item.id === id)
        return { ...item, [name]: value };

      return item;
    }));
  };

  const handleAddRow = () => {
    setItemRows([
      ...itemRows,
      {
        id: crypto.randomUUID(), // add this line
        type: "",
        effect: "",
        usageLimit: 0,
      },
    ]);
  };

// With this alteration, we can implement the delete handler

  const handleDeleteRow = (id) => {
    setItemRows(itemRows.filter((item) => item.id !== id));
  };

Now just do the props modifications and in the Row component change the handleItemChange to accept the id, and now all is working well.

Last is the block handler. We learned we need an ID to delete and avoid duplicating, so let's do it:

  const [itemBlocks, setItemBlocks] = useState([{ id: 0 }]);

  const handleAddBlock = () => {
    setItemBlocks([...itemBlocks, { id: itemBlocks.length }]);
  };

  const handleDeleteBlock = (id) => {
    setItemBlocks(itemBlocks.filter((block) => block.id !== id));
  };

Now is just to set the props and add to the button on click. Let's see if it works:

Hmm, worked, but not like as expected. This code broke what we had fixed. When we try to add a new item row duplicate in the blocks, the inputs are duplicating too. And when we try to delete the row in the same way.

The Problem

This occurs because the children in the ItemBlock didn't change together when they needed to. Like the rows and inputs before, we can fix this by nesting the state that needs to change together. Example: if the first block has 4 rows, we want to keep it, and when we add the new block, this block needs to have one row, and all this data needs to be isolated. So finally we achieve a state like this:

  const [itemBlocks, setItemBlocks] = useState([
    {
      id: 0,
      rows: [
        {
          id: crypto.randomUUID(),
          type: "",
          effect: "",
          usageLimit: 0,
        },
      ]
    }
  ]);

But now, imagine the pain of modifying the inputs. In this state, we have a deep nesting complexity and performance issues with many blocks/rows; the update functions do a lot of work (multiple array iterations).

The handle function starts to look like this:

  const handleItemChange = (id, blockId, name, value) => {
    setItemBlocks(
      itemBlocks.map((block) => {
        if (block.id === blockId) {
          const updatedRows = block.rows.map((row) => {
            if (row.id === id) {
              return { ...row, [name]: value };
            }
            return row;
          });
          return { ...block, rows: updatedRows };
        }
        return block;
      })
    );
  };

Step 4: The Solution, Normalise the state and modify the handlers.

With the normalised state we have something like this:

const normalisedState = {
  itemBlocks: {
    0: {
      id: 0,
      rowsIds: [1]
    }
  },
  itemRows: {
    1: {
      type: "",
      effect: "",
      usageLimit: 0,
    }
  }
}

Notice, now we just have one level of nesting over two of the past state. The idea is that the blocks just refer to the row ids like a SQL table referring to itself. Now the handleChange function looks like this:

  const handleItemChange = (id, name, value) => {
    setItemBlocks({
      ...itemTree,
      itemRows: {
        ...itemTree.itemRows,
        [id]: {
          ...itemTree.itemRows[id],
          [name]: value
        }
      }
    })
  };

Conclusion

Using many nested objects/arrays in the state brings complexity and possibly performance issues. The idea is to maintain the state as flat as possible. And using Normalised Tree is a way to do that. If you have some functionality similar to this little challenge or have another way to solve that problem put in the comments and let's discuss it!

References

https://react.dev/learn/thinking-in-react
https://react.dev/learn/updating-objects-in-state
https://react.dev/learn/updating-arrays-in-state

Installing Ruby and Rails on WSL2 using ASDF-VM

Clever Lopes — Thu, 04 Jul 2024 17:01:23 +0000

In this short tutorial i'm using ubuntu 22.04lts on WSL2

Pre-reqs

You need the asdf-vm and the dev packages installed.

Getting Started

Install the ruby plugin

asdf plugin add ruby

Install the version

asdf install ruby x.x.x

Set the global version

asdf global ruby x.x.x

Install the bundler and rails

gem install bundler

gem install rails

To set up your rails development env you can see this post

Obs:

If you have some problem in install the ruby version using asdf make sure the following packages are installed: libyaml-dev libtool zlib1g zlib1g-dev libffi

Fast guide, creating a ssh key pair for the user in Linux

Clever Lopes — Sat, 08 Jul 2023 13:16:22 +0000

Pre reqs

For this very short tutorial, you need to have installed the ssh client and server on your linux.
To install on Ubuntu:
$ sudo apt install openssh-client $ sudo apt install openssh-server
On Arch
$ yay -S openssh or $ sudo pacman -S openssh

Getting Started

To create your key pair run this command:
$ ssh-keygen -o -a 100 -t ed25519 -f ~/.ssh/id_ed25519 -C "{your_email}"

After this will appear a message to enter a passphrase like this:
Enter passphrase (empty for no passphrase):

You can just press Enter or write your passphrase and confirm.

To get your pub key type:
$ cat ~/.ssh/id_ed25519.pub

Now you can copy your pub key and register on the ssh client of the service you want, like Github or Amazon.

So you don't have to type the passphrase all the time, your machine needs to have the ssh-agent service. You check if is running with this command:
$ eval "$(ssh-agent -s)"
The command will return the agent pid of the process.

If it is running, you can add your new key to the agent, just type:
$ ssh-add ~/.ssh/id_ed25519.
Then it only will ask for your passphrase once.

Well done! Now you're a cryptographically identifiable citizen in our society.

How to set up a development env to Rails app with Docker and PostgreSQL on WSL2

Clever Lopes — Sat, 08 Jul 2023 01:32:13 +0000

For development, I don't guess configuring Dockerfile and docker-compose (just if you want, sure) is necessary.

Pre-reqs

This short tutorial was built using WSL2, integrated docker, ruby 3.2.2 and rails 7.0.6.

Getting Started

We're going to basically create a new rails application, raise and connect the docker postgresql container with the app.

I like creating my projects in ~/projects
$ mkdir ~/projects && cd projects
$ rails new myapp -d postgresql

You don't need the postgresql installed, just the necessary packages to run it. If you have a problem with the pg gem, make sure the following packages are installed.

on ubuntu
$ sudo apt-get install libpq-dev

on arch $ yay -S postgresql-libs or just $ sudo pacman -S postgresql-libs

After this, you can raise the container with the postgres replacing the {} for the name that you want.

$ docker run --name {container_name} -e POSTGRES_PASSWORD={password} -e POSTGRES_USER={username} -p 5432:5432 -v $HOME/docker/volumes/postgres:/var/lib/postgresql/data -d postgres:14.2-alpine

This command will raise the container binding the 5432 port and setting the volume, you can change the postgres:14.2-alpine for another image.

Now you have to set the /config/database.yml with the right params to connect in the postgres container.

Your file will be like this:

default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  host: localhost
  port: 5432
  password: {your_password}
  username: {your_username}

development:
  <<: *default
  database: {myapp_development_db}

test:
  <<: *default
  database: {myapp_test_db}

production:
  <<: *default
  database: {myapp_production_db}
  username: {your_prod_username}
  password: {your_prod_password}

I put the password and username in default, but the best is to have a user and password for the dev, test and prod. And put all the values on a .env file.

If all occur well you just have to run
$ rails s
and you can start your app development.