DEV Community: mohammadAli

A Small React Bug That Taught Me to Debug the Render Chain

mohammadAli — Sat, 03 Oct 2026 10:56:07 +0000

Debugging a Small React Rendering Bug in FocusYar

While building the Task section of my Next.js project, FocusYar, I ran into a simple problem:

I clicked the Edit button, but the EditTask component didn't appear.

At first, I looked at the component itself and the Todo data. But the actual problem was much simpler.

The Problem

The component was rendered conditionally:

{openDetailTsk === detail.id && afterEditDetailTask && (
  <EditTask />
)}

I was updating:

setopenDetailTsk(id);

but I wasn't updating:

afterEditDetailTask

So even though the first condition became true, the second one remained false.

As a result, React correctly didn't render the component.

The fix was simply to update both states:

setopenDetailTsk(id);
setAfterEditDetailTask(true);

Another TypeScript Lesson

I also encountered a TypeScript event type mismatch.

The handler was attached to a button:

<button onClick={...}>

but I had typed the event as:

React.MouseEvent<HTMLDivElement>

Since the event came from a <button>, the correct type was:

React.MouseEvent<HTMLButtonElement>

This was a good reminder that TypeScript can help us understand exactly which DOM element we're working with.

One More Thing I Learned

During this process, I initially thought I needed to get all Todos and use find() to locate the task I wanted to edit.

But then I realized I already had the current Todo in detail.

So instead of unnecessarily getting the data again:

all Todos
   ↓
find()
   ↓
selected Todo
   ↓
EditTask

I could simply use the data I already had:

detail
   ↓
EditTask

This made the data flow simpler and avoided an unnecessary step.

My Debugging Checklist

When a React component doesn't appear, I now try to follow the rendering chain step by step:

Click
  ↓
Event handler
  ↓
State update
  ↓
Render condition
  ↓
Props
  ↓
Component

This small bug was a useful reminder:

Don't debug only the component. Debug the whole rendering chain.

And the best part?

I eventually found and fixed the bug myself. 🚀

A Null Priority Bug Between UI, Database, and Zod

mohammadAli — Thu, 17 Sep 2026 06:01:13 +0000

While working on FocusYar, I found a bug when editing a Task without a priority.

I created a Task with only a title, so the database stored:

priority: null

Later, when I opened the edit form and left priority empty, I got:

There is nothing task

The problem

In my Zod schema, I was checking for undefined:

priority: z.preprocess(
  (value) => (value === undefined ? "" : value),
  z.enum(["LOW", "MEDIUM", "HIGH", "URGENT"]).optional(),
),

But the actual value coming from the database was null.

At first, I changed the condition to "", but it didn't solve the problem.

The solution

I checked the complete data flow:

UI → Database → Zod → Server Action

Then I found the same field in my edit schema and changed the check from undefined to null:

priority: z.preprocess(
  (value) => (value === null ? "" : value),
  z.enum(["LOW", "MEDIUM", "HIGH", "URGENT"]).optional(),
),

What I learned

When debugging optional fields, I should check the actual value at every layer.

undefined, null, and "" are not the same.

Sometimes the bug isn't in the UI or database alone.
It can be caused by how the value moves between different layers of the application.

toggle show and hide password trick

mohammadAli — Mon, 14 Sep 2026 12:18:12 +0000

we should use type input to convert show and hide password by click on eye icon.

<input
   id="password"
   name="password"
   type={showPassword ? "text" : "password"}
   autoComplete="new-password"
   placeholder="رمز عبور"
   className={inputClass}
/>

I ran into a date validation error in Zod while working on my Next.js project. Here’s how I used z.preprocess() to handle empty date values before validation.

mohammadAli — Mon, 14 Sep 2026 09:41:08 +0000