Forem: Wild Boar Dev

Static Single Assignment (SSA)

Wild Boar Dev — Wed, 17 Sep 2025 04:54:29 +0000

1️⃣ What is SSA?

SSA is a way of representing code where:

Each variable is assigned exactly once.
If a variable is reassigned → the compiler creates a new “version” of that variable (x1, x2, x3 …).
When there are multiple control-flow branches (if/else), the compiler uses a φ-function to “merge” values back together.

🔎 Note: SSA is not a new kind of IR on its own, but rather a specialized form of IR. Compilers convert their Intermediate Representation (IR) into SSA form to make analysis and optimization easier.

2️⃣ Example

Normal

Original code:

x = 1;
x = x + 2;
y = x * 3;

After converting to SSA:

x1 = 1;
x2 = x1 + 2;
y1 = x2 * 3;

Branching (if/else)

Original code:

if (cond) {
    x = 1;
} else {
    x = 2;
}
y = x + 3;

After converting to SSA:

if (cond) {
    x1 = 1;
} else {
    x2 = 2;
}
x3 = φ(x1, x2);
y1 = x3 + 3;

Loop (while)

Original code:

let sum = 0;
let i = 0;

while (i < 3) {
  sum = sum + i;
  i = i + 1;
}

After converting to SSA:

let sum0 = 0;
let i0 = 0;

while (i0 < 3) {
  let sum1 = sum0 + i0;
  let i1 = i0 + 1;

  // φ-functions to bring values back into the loop
  sum0 = φ(sum1);
  i0 = φ(i1);
}

3️⃣ What is the φ-function?

The φ (phi-function) is a special notation in SSA, not an actual runtime function.

It only exists during compiler analysis of control flow.
Its role is to select the correct value depending on which branch was executed:
- If cond is true → x3 = x1.
- If cond is false → x3 = x2.

In other words: φ acts as a “bridge” that unifies variables from different branches into a single one in SSA.

4️⃣ Why is SSA important?

Simplifies analysis: every variable has exactly one definition.
Enables stronger optimizations: such as constant propagation, dead code elimination, and register allocation.

5️⃣ Extensions and Variations of SSA

SSA is a flexible and extensible representation, and several variations have been developed to improve its performance and adaptability:

Minimal SSA: This extension seeks to insert the minimal number of Φ-functions while ensuring that each variable is assigned exactly once.
Pruned SSA: This variant avoids inserting unnecessary Φ-functions by considering live-variable information during the SSA construction process.
Semi-pruned SSA: A more efficient variation that omits Φ-functions for variables that are not live when they enter a basic block.
Block arguments: An alternative to Φ-functions, where block arguments are used to represent control-flow merges in a way that is more convenient for optimization. Some compilers like LLVM MLIR and Swift SIL use block arguments.

🎯 Conclusion

SSA isn’t just a theoretical concept - it’s the foundation of most modern compilers. It simplifies dataflow analysis and optimization, making compilers more efficient. In short, SSA is the secret sauce that enables compilers to be both smart in analyzing code and powerful in optimizing it.

🔗 References

Intermediate Representation (IR): An Easy Overview

Wild Boar Dev — Mon, 09 Jun 2025 15:28:25 +0000

Intermediate Representation (IR) is like a translation of your code into a simpler, more structured version — just for the computer.

It’s not exactly the code you wrote, and it’s not machine code either. It’s in the middle, and it helps the compiler do its job: check, analyze, and make the code faster before it runs.

In short, It is the middle layer that helps compilers understand and improve your code.

🗂️ Are there different types of IR?

Yes! Most modern compilers break IR into multiple layers, going from high-level (close to your original code) down to low-level (closer to machine code):

1️⃣ HIR – High-level IR

Still looks a lot like your original code.
Keeps if, &&, for, and other logic.
Easy for the compiler to analyze what the code means, but not ready for optimization.

Example:

if (user.isLoggedIn && user.hasRole("admin")) { ... }

2️⃣ MIR – Mid-level IR

Splits big expressions into simple steps.
Much easier for the compiler to optimize or rearrange.

t1 = user.isLoggedIn  
t2 = user.hasRole("admin")  
t3 = t1 && t2  
if (t3) goto BLOCK_ADMIN

3️⃣ LIR – Low-level IR

Now the code looks like instructions for the machine.
You’ll see low-level operations like LOAD, CMP, JUMP,...

LOAD R1, user.isLoggedIn  
LOAD R2, user.hasRole  
CALL R2, "admin"  
AND R3, R1, R2  
CMP R3, 0  
JZ END

⁉️ How Compilers Understand IR?

To make sense of your program, compilers don’t just read code line by line — they look at how the logic flows. That’s where Control-Flow Graphs (CFGs) come in.

A CFG is like a roadmap that shows all the different routes your program might follow as it runs.
It breaks your code into basic blocks — small, straight pieces of code with no jumps — and connects them based on decisions like if, else, or loops.
This helps the compiler understand your program's logic clearly, clean up unused code, and make everything run faster.

Example:

⚒️ Tools that use IR

Tool / Compiler	Note
LLVM (Clang, Swift)	Uses powerful LLVM IR
Rust	Uses HIR → MIR → LLVM IR
React Compiler	Uses HIR and reactive scopes
V8 (Chrome JS engine)	Uses internal IR for JIT compilation

🎯 Conclusion

IR is how your code becomes smarter before it runs.
It helps compilers understand, improve, and prepare your program step by step.

If you:

Build developer tools.
Work with performance-critical code.
Want to dive deeper into how compilers think.

🔗 References

😊 Thanks for reading!

What Is an Abstract Syntax Tree (AST)? Explained Simply

Wild Boar Dev — Sun, 08 Jun 2025 10:23:16 +0000

When you write code, the computer doesn’t understand it the same way humans do. Instead, compilers or code analysis tools convert the source code into a tree-like data structure called an AST – Abstract Syntax Tree, which is then used for tasks like error checking, optimization, or compilation.

Note: AST exists in many programming languages, but I’ll use JavaScript as a specific example.

🌳 What is an Abstract Syntax Tree?

An AST (Abstract Syntax Tree) is an abstract representation of source code in the form of a hierarchical tree structure. Each node in the tree represents a syntactic element of the program, such as:
- Variables – Representing values or references.
- Operators – Like +, -, *, /.
- Functions – Logical units of computation.
- Conditional statements – Like if.
- Loops – Such as for, while.
An AST omits syntactic details that are not logically important, such as:
- Semicolons (;).
- Parentheses or braces ((), {}).
- Line breaks, indentation, formatting.
The goal is to focus solely on the actual logic and structure of the code.

This is how a compiler “understands” your code.

Original source code (JavaScript):

const sum = a + b;

Corresponding AST:

{
  "type": "VariableDeclaration",
  "kind": "const",
  "declarations": [
    {
      "type": "VariableDeclarator",
      "id": { "type": "Identifier", "name": "sum" },
      "init": {
        "type": "BinaryExpression",
        "operator": "+",
        "left": { "type": "Identifier", "name": "a" },
        "right": { "type": "Identifier", "name": "b" }
      }
    }
  ]
}

Explanation:

VariableDeclaration: Declares a variable.
BinaryExpression: A mathematical expression (a + b).
Identifier: The variables a, b, and sum.

🔧 What is AST used for?

Syntax Parsing
- Checks whether the code is syntactically correct.
- Detects issues like missing parentheses, improperly nested functions, or invalid structures.
Code Optimization
- Removes unused variables (dead code).
- Simplifies mathematical or logical expressions (e.g., a * 1 → a).
Transpilation (Syntax Transformation)
- Converts newer syntax into older syntax.
- Example: Babel transforms ES6 into ES5 to support older browsers.
Linting and Auto-fixing
- Tools like ESLint and TSLint use AST to detect code style or logic violations.
- Can automatically fix issues like converting var to let or removing unnecessary parentheses.
Code Formatting
- Tools like Prettier use AST to restructure code for consistent and readable formatting — without changing logic.
Refactoring (Automated Code Restructuring)
- Rename variables or functions without breaking references.
- Add function parameters, move code across modules safely and correctly.

🚀 Real-world Tools That Use AST

Tool	Purpose
Babel	Transforms modern JavaScript syntax into older versions (e.g., ES6 → ES5)
ESLint	Analyzes code to detect and warn about potential errors and style violations
Prettier	Automatically formats code for consistent style without changing behavior
AST Explorer	Web-based interface to view and explore the AST of your code
TypeScript	Uses its own AST to support static type checking and code transformation
React Compiler	Uses AST to analyze and optimize React hooks and component logic

🎯 Conclusion

Understanding AST is simply about knowing how a computer "reads" and interprets your code.
Once you grasp how AST works, it becomes much easier to visualize how compilers or linters process each line of code. From there, you can:
- Build custom tools tailored to your project
- Refactor code with confidence, without breaking logic
- Optimize performance for large applications in a clear and controlled way
Whether you're working on frontend, backend, or developer tooling, understanding how AST works will broaden your perspective and strengthen your foundational knowledge of how code is processed behind the scenes.

🔗 References:

😘 Thanks for reading!

Concept, Pattern, Structure and Architecture – What’s the Difference?

Wild Boar Dev — Wed, 28 May 2025 06:54:26 +0000

Quick Comparison:

Aspect	Concept 💡	Design Pattern 🛠️	Structure 🏗️	Architecture 🏛️
Definition	A basic idea or way of thinking about how code works.	Reusable solution to a problem	How project files and parts are set	Big system design and interaction
Purpose	To help write clear and simple code.	Solve design problems clearly	Keep project organized	Make system scalable and maintainable
Usage	Used when planning and thinking about problems.	Used directly in code	Organize folders and files	Design whole system structure, flow,...
Scope	Mindset for individuals or teams	Code-level technique	Project-level layout	System-wide design
Impact	Influences how you write and organize your code.	Affects solving coding issues	Affects code clarity and teamwork	Affects system performance & maintenance

In short:

💡 Concept → A basic idea or way of thinking that helps us understand or write code.
🛠️ Design Pattern → A solution to a specific coding/design problem
🏗️ Structure → How code and folders are physically organized.
🏛️ Architecture → The system detail, interactions, and flow.

Examples

Below, I will use React as an example.

💡 Concept

The key concept in React is building user interfaces with small, reusable pieces called components. React’s concept is to describe what the UI should look like based on data, not how to change it. When data changes, React updates the screen automatically. Other important concepts like props, state, and hooks help you manage data and behavior, keeping your app organized and fast.

🛠️ Design Pattern

The Context Pattern in React is a design pattern that allows you to pass data to deep child components without going through every intermediate level (avoiding prop drilling). It uses the Context API as a shared data channel between components. This pattern is efficient, reusable, and helps keep your code clean in large applications.

Here, “context” is both a concept and a design pattern, so I’ll keep the explanation simple.

Context (Concept): Using information from nearby parts of the program to help a component know what to do or how to behave.

Context (Design Pattern): A way to store and share useful data in one place (a "context object") so that other parts of the system can access it easily.

🏗️ Structure

A basic structure for a React project that splits components, pages, and utils for easier management.

🏛️ Architecture

This picture shows an architecture where a React app uses Redux to manage its data. When something happens in the app, it can send or receive data through a server. The server communicates with a database to save or load information.

References:

😊 Thanks for reading! Happy coding!

Install Fewer Libraries – Not to Be “Pure”, But to Be Smarter 🔻📦 👉 🎉

Wild Boar Dev — Mon, 26 May 2025 02:07:53 +0000

📌 Note before we begin:

You might already know (or do) most of what’s in this post — and that’s great.
Think of this as a quick reference, not a rulebook. Use it to reflect, refine, or share with your team.

🔰 Introduction

In modern software development, there's a library for almost everything:

Debouncing, date formatting, data validation, API calls, routing, state management, database queries, caching, logging...

And that abundance creates a common habit:

“Found a library? Just install it.”

But every npm install does more than just add functionality.

It introduces:

More bundle size
More maintenance overhead
More potential security risks
And less control over your system

So let’s break down the benefits of using fewer libraries — and more importantly, when it actually makes sense to avoid or include them.

🎯 Benefits of Using Fewer Libraries

1️⃣ Smaller Bundles = Better Performance

Every library adds weight:

On the frontend: increased bundle size → slower load time
On the backend: longer startup time, more memory usage

📌 Example: Instead of importing all of lodash, just use lodash/debounce — or better yet, write your own debounce() in ~10 lines.

2️⃣ Greater Control Over Your Codebase

Less third-party code = fewer black boxes.

You can:

Understand what your code is doing
Debug faster
Refactor with confidence

You're not stuck waiting for a library to fix a bug you can't see.

3️⃣ Reduced Dependency Risk

Every dependency is a risk:

❗ Could contain security vulnerabilities
⚠️ Could introduce breaking changes in future updates
⛔ Could be deprecated or unmaintained at any time

The fewer dependencies you have, the lower the blast radius.

4️⃣ Lower Technical Debt

Some libraries solve problems now, but create long-term pain.

📌 Example: Using a rigid UI kit or ORM might seem fast at first — but if you want to switch frameworks or change structure later, it can be a nightmare to decouple.

5️⃣ Easier Maintenance & Upgrade Path

Less to track. Less to break.

Fewer version mismatches
Fewer conflicts in package trees
Faster CI/CD pipelines
Simpler testing

6️⃣ Deepen Your Understanding

Writing small utility code yourself helps you:

Learn native Web APIs or Node.js internals
Understand how libraries/frameworks work under the hood
Develop better architectural thinking and engineering discipline

The goal isn’t to avoid libraries — but to not use them as a crutch.

⚖️ When Should You Use a Library?

Scenario	Should Use?	Why
Simple data validation	❌ No	A few lines of logic is enough
Complex schema validation	✅ Yes	Use `zod`, `yup`, etc. for clarity and scalability
Basic state or cache management	❌ No	`useState`, `useContext` or in-memory store is sufficient
Complex state logic, persistence needed	✅ Yes	Use `Zustand`, `Redux`, or modular state services
Basic date formatting	❌ No	`Intl.DateTimeFormat` covers most needs
Handling timezones or calendars	✅ Yes	Use `dayjs`, `date-fns`, `luxon`…

🧪 Case Study: Context vs State Manager

❌ When You DON’T Need a Library:

Your app is small
You only pass props down a few levels
Your CRUD logic is straightforward

✅ When You DO:

You manage different types of state (UI, data, server)
You want to optimize rendering or cache data
You need persistence or modularization
You require shared logic across multiple parts of the app

In those cases, libraries like Zustand, React Query, Prisma, or Sequelize provide real value — they solve complex problems in a clean, scalable way.

🚫 Don’t Be Extreme: Know When to Use a Library

This isn’t about being a “pure coder”. It’s about being intentional.

Use a library when:

✅ The problem is complex and error-prone (e.g. timezone handling, debounce, API caching).
✅ You need reliability and coverage (e.g. encryption, auth, validation).
✅ The library adds productivity with minimal downside.

📌 A Pre-Install Checklist

Before typing npm install, ask yourself:

Do I really understand the problem I'm trying to solve?
Can I write this in under 20 lines myself?
What are the performance, maintenance, or security trade-offs of this library?

👉 If it's simple → Write it yourself.

👉 If it's complex → Install it — but do it intentionally.

🎯 Conclusion

Using libraries isn't wrong.
Using them blindly is.
You don’t have to code everything from scratch.

You don’t have to “purify” your project of all external tools.
But you should stay deliberate about what you bring in — because it directly impacts:

Performance
Maintainability
Long-term flexibility
And your own growth as a developer

Use fewer libraries not to prove a point — but to build smarter.

Why Type Is the Better Choice in React + TypeScript

Wild Boar Dev — Sun, 25 May 2025 02:55:40 +0000

📝 Important note: Whether to use type or interface depends on your team’s or company’s conventions. If there is an established rule, please follow it. This article is for reference, for those who are unsure or want to find the best approach when using React + TypeScript.

1. Introduction

React is now one of the most widely used UI libraries in modern web development. When combined with TypeScript, it provides a powerful, safe, and scalable development environment.

However, one common question is: should you use type or interface to define data types in React projects?

Although both can describe data structures, they have different characteristics and use cases — especially important when writing React code in a functional programming style.

2. Comparing `interface` vs `type`

Criteria	`interface`	`type`
Usage	Mainly for objects and class structures	More flexible: object, union, intersection, tuple, primitive types
Inheritance / Extension	✅ Use `extends` to inherit	✅ Use `&` to combine multiple types
Merge (declaration merging)	✅ Can be declared multiple times (auto-merged)	❌ Cannot merge; duplicate names cause an error
Suitable for classes	✅ Ideal for `class` with `implements`	❌ Not valid for `implements` in classes
Suitable for function components	Usable	✅ Preferred: cleaner & more concise for props
Union / Intersection / Tuple	❌ Not directly supported	✅ Fully supported
Extensibility in libraries	✅ Can extend external types (e.g., `Express.Request`)	❌ Cannot extend external types (no declaration merging)
Compatibility with utility types	✅ Works well	✅ Works slightly better (`Partial`, `Omit`, `ReturnType`, etc.)
Mapped types / `keyof` / `infer`	⚠️ Limited	✅ Fully supported with generics, mapped types, and inference

3. Which one fits better when coding React?

✅ `type` is more suitable in modern React

In the context where React Functional Components are the standard:

You don’t use classes, removing the advantage of interface.
You often need to combine types (&), create unions (|), or use utility types → type handles these better.
type supports aliases for primitive types like string, number, boolean — something interface cannot do.

Example:

type ID = string | number;
type Status = 'loading' | 'success' | 'error';

These are commonly used in React for props, string enums, or flexible combined types.

Code tends to be cleaner and easier to read with type.

Example in React:

type ButtonProps = {
  label: string;
  onClick: () => void;
};

const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

❗ Minor drawback of not using interface:

No declaration merging: If you need to extend types from libraries (like Express.Request, NextApiRequest, etc.), interface is advantageous because it allows multiple declarations.

Not suitable for classes: If you use class implements, then interface is required.

🧩 However, these drawbacks rarely affect typical React app development, since most components are functional, props types are simple, and extending backend types is uncommon.

4. Conclusion 🎯

Both type and interface have their strengths, but in modern React with functional components, type is generally more suitable and flexible. It provides cleaner code and better support for unions, intersections, and primitive types, helping you work more efficiently.

If you need extensible data types or to work with classes, interface is a better choice.

However, the most important factor is consistency within your team or project. Choosing to use type or interface should follow common guidelines to keep the codebase clear and maintainable. Finally, focus on writing clean, readable code and adhere to your team’s conventions to ensure sustainable development.

Understanding Stale Closure in React: A Common Pitfall and How to Avoid It

Wild Boar Dev — Thu, 22 May 2025 07:54:49 +0000

🧠 1. Overview of Stale Closure in React

In React, a common but subtle bug is the "stale closure" — which happens when a function inside a component uses an outdated value, not reflecting the current state or props.

This often leads to unexpected behavior, especially in callbacks, useEffect, or asynchronous logic.

Understanding how JavaScript creates closures and how React handles re-renders is key to avoiding this issue.

📦 2. Recap: Scope & Closure in JavaScript

Scope defines the visibility of variables. In JavaScript, we have function scope and block scope.

A closure occurs when a function remembers variables from the scope where it was defined, even if it's executed elsewhere.

Example:

function outer() {
  let count = 0;
  return function inner() {
    console.log(count); // closure retains the value of count
  };
}

Closures are powerful, but in React, they can cause a function to "remember" stale values — and that’s the root of stale closures.

⚠️ 3. Common Cases of Stale Closure

a. Callback inside `useEffect` or `useCallback`

const [text, setText] = useState("");

const handleLog = useCallback(() => {
  console.log(text); // text may be stale if not included in dependency array
}, []);

b. Async function in event handler

const handleSubmit = async () => {
  await delay(1000);
  console.log(value); // value might be outdated
};

c. Event listeners or subscriptions

useEffect(() => {
  const handler = () => {
    console.log(data); // data might be stale
  };
  window.addEventListener("resize", handler);
  return () => window.removeEventListener("resize", handler);
}, []);

🛠️ 4. How to Fix It

✅ Use callback to update state
When updating state based on the previous state, always use a callback:

setCount(prev => prev + 1); // avoid setCount(count + 1)

✅ Include variables correctly in dependency arrays

useEffect(() => {
  // always use correct dependencies
  doSomething(value);
}, [value]);

✅ Use useRef to store the latest value

const latestValue = useRef(value);
useEffect(() => {
  latestValue.current = value;
}, [value]);

const handleClick = () => {
  console.log(latestValue.current);
};

✅ Use useEvent (the latest version of React or custom hook equivalent)

If the newest version of React doesn't have it yet, you can create your own:

function useEvent(callback) {
  const cbRef = useRef(callback);
  useEffect(() => {
    cbRef.current = callback;
  });
  return useCallback((...args) => cbRef.current(...args), []);
}

5. Conclusion 🎯

Stale closure is a natural consequence of how JavaScript handles closures and how React separates the render cycle from effects and callbacks.

Understanding this mechanism helps you write more stable and easier-to-debug React code.

Always ask yourself:

"At what point in time is this function using the value?" — and you will avoid many bugs.

React 19 Form Hooks vs react-hook-form: A Complete Comparison

Wild Boar Dev — Thu, 22 May 2025 07:26:23 +0000

🔍 1. Architecture & Philosophy

Aspect	React 19 Form Hooks	React Hook Form (RHF)
Paradigm	Server-first (especially with Next.js App Router)	Client-first, SPA-centric
Form state management	Built into React via `useFormState` and HTML form features	Explicit via `useForm()` and controlled/uncontrolled inputs
Design goal	Progressive enhancement, minimal JS	Full-featured client form toolkit
Approach	Leverages native `<form>` behavior and declarative actions	Uses refs for performance; wraps form state with hooks and components

⚙️ 2. Form Submission & Handling

🔸 React 19

'use server';

// Server action to handle form submission
async function handleAction(formData: FormData) {
  const email = formData.get('email');
  // Handle form data on server (e.g., save to DB, send email)
}

export default function MyForm() {
  return (
    <form action={handleAction}>
      <input type="email" name="email" required />
      <SubmitButton />
    </form>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus(); // Tracks if form is submitting
  return <button disabled={pending}>{pending ? 'Submitting...' : 'Submit'}</button>;
}

action={} handles form submission — can be a server function (in frameworks like Next.js).
useFormStatus() can be used inside the submit button for loading states.
No need for onSubmit, no extra hook.

🔸 React Hook Form:

import { useForm } from "react-hook-form";

export default function MyForm() {
  const { register, handleSubmit } = useForm();

  // Function to handle form data on submit
  function onSubmit(data) {
    console.log("Form data:", data);
    // You can send data to an API or process it here
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} type="email" placeholder="Enter your email" />
      <button type="submit">Submit</button>
    </form>
  );
}

Handles form submission using handleSubmit.
Requires setup of form logic explicitly.

🧠 3. Validation

Feature	React 19	React Hook Form (RHF)
HTML5 validation	✅ Supported	✅ Supported
Custom validation rules	Manual (via `onChange`, `onBlur`, or server validation)	✅ Built-in via `rules`
Schema validation (Zod/Yup/etc.)	❌ Manual wiring needed	✅ Deep integration
Validation mode	Limited	✅ `onChange`, `onBlur`, `onSubmit`, etc.

RHF Example with Zod:

const schema = z.object({
  email: z.string().email(),
});

const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: zodResolver(schema),
});

🚀 4. Performance

Metric	React 19	React Hook Form (RHF)
Re-renders per input	Native browser-controlled	Optimized using refs, fewer re-renders
Controlled vs uncontrolled	Uses native behavior, typically uncontrolled	Prefer uncontrolled, but supports both
Form-wide state updates	Fine-grained with `useFormStatus`, `useFormState`	Extremely performant with fine-grained updates via refs

RHF is highly optimized to minimize re-renders even for complex forms, which is useful for dynamic field arrays or large forms.

🧩 5. Complex Forms (Field Arrays, Nested Fields)

Feature	React 19	react-hook-form (RHF)
Field arrays	❌ Manual implementation	✅ Built-in `useFieldArray()`
Conditional fields	❌ Requires custom logic	✅ Built-in handling
Dynamic inputs	❌ Manual	✅ Built-in APIs
Nested objects	❌ Manual (`name="user.email"` style)	✅ Deep support with dot notation

React 19 doesn’t provide high-level utilities for these patterns — you’ll need to build your own handlers. In contrast, react-hook-form comes with battle-tested APIs designed to handle these complex scenarios smoothly.

🛠 6. Tooling & Ecosystem

Area	React 19	React Hook Form (RHF)
DevTools support	Basic React DevTools	✅ RHF DevTools
UI libraries support	Minimal	✅ RHF-compatible components (MUI, Chakra, shadcn-ui, etc.)
Community plugins	❌ Not applicable	✅ RHF + Zod/Yup, i18n, async validation
TypeScript support	Good, but verbose	✅ Strong with helper types

📦 7. Example Comparison

✅ React 19 (Next.js Server Action)

// server action
'use server'
async function submitForm(formData: FormData) {
  const email = formData.get('email');
  // server-side logic
}

export default function Page() {
  return (
    <form action={submitForm}>
      <input type="email" name="email" required />
      <SubmitButton />
    </form>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? 'Submitting...' : 'Submit'}</button>;
}

✅ react-hook-form with Zod

const schema = z.object({
  email: z.string().email(),
});

const {
  register,
  handleSubmit,
  formState: { errors, isSubmitting },
} = useForm({
  resolver: zodResolver(schema),
});

function onSubmit(data) {
  // client-side submit logic
}

<form onSubmit={handleSubmit(onSubmit)}>
  <input type="email" {...register("email")} />
  {errors.email && <p>{errors.email.message}</p>}
  <button disabled={isSubmitting}>Submit</button>
</form>

🧭 When to Choose Which?

Use Case	Recommended
Simple forms with server logic	✅ React 19
Progressively enhanced apps (no JS fallback)	✅ React 19
Complex client-side validation	✅ React Hook Form (RHF)
Dynamic fields / arrays	✅ React Hook Form (RHF)
Full SPA, no server actions	✅ React Hook Form (RHF)
You're using Next.js App Router	✅ React 19 (with optional RHF)

🧠 TL;DR

Feature/Need	React 19	react-hook-form
Simple forms	✅	✅
Complex logic	❌ Manual	✅ Built-in
Server-first architecture	✅ Built-in support	❌ Requires workarounds
Schema validation	❌ Manual	✅ Zod/Yup
Dynamic fields (arrays, etc.)	❌ Tedious	✅ Easy
Fallback without JS	✅ Native support	❌ JS-dependent
TypeScript experience	✅ Good	✅ Excellent

Conclusion 🎯

React 19’s native form hooks and react-hook-form both make building forms easier—but they shine in different situations.

Use React 19 form hooks if you want simple forms that work well with server-side actions and need fewer dependencies.

Use react-hook-form if your forms need lots of validation, dynamic fields, or complex behavior on the client side.

Sometimes, you can even use both together depending on your app’s needs. Knowing when to use each will help you build better forms with React.

Introducing Zod 4 – Super Fast, Lightweight, and Packed with Powerful Features!

Wild Boar Dev — Thu, 22 May 2025 02:45:24 +0000

After a year of active development, Zod 4 is officially released with major improvements. This stable version is faster, slimmer, and more TypeScript-optimized compared to the previous Zod 3.

Highlights of Zod 4

🚀 Outstanding Performance

14x faster string parsing: Deep optimizations in string validation make your app respond much faster, especially when handling large amounts of text data.
7x faster array parsing: Efficiently process complex or large arrays, minimizing latency in data validation.
6.5x faster object parsing: Ideal for objects with many fields, ensuring smoother validation and faster API responses.

⚡ TypeScript Compiler Optimization

Reduces type instantiations by up to 100x, speeding up the TypeScript compiler significantly, especially for large and complex codebases.
Compilation time is improved by around 10x compared to Zod 3, providing a smoother developer experience and faster editor feedback.

📦 Reduced Bundle Size

Core bundle size is 2.3x smaller than Zod 3, making your applications lighter and faster to load.
The zod/v4-mini variant is even lighter (~1.88KB gzip), using a functional API optimized for tree-shaking, perfect for projects with strict bundle size limits.

🏷️ Powerful Metadata System

Allows attaching strongly-typed metadata to schemas, enabling easy mapping to standard JSON Schema.
Great for automation tools, API documentation, and data transformation workflows.

🔄 Simple Recursive and Mutually Recursive Types

Define self-referencing or mutually referencing types (e.g., category trees, user-post relationships) directly without complex casting hacks.
Increases code clarity and maintainability.

🌐 Internationalized Error API

Supports a locales system to translate error messages into multiple languages, improving user experience in global applications.
English locale available now, with community contributions expected for more languages.

✨ New Top-Level String Format APIs

Popular formats like email(), uuid(), ip(), and url() are now top-level functions, leading to cleaner code and better tree-shaking.
Older method-based APIs on strings remain available but are deprecated.

🔤 `z.stringbool()`

Converts strings to booleans using a flexible, environment-variable style (e.g., "true", "yes", "1" → true; "false", "no", "0" → false).
Customizable truthy/falsy values to fit your specific needs, making it easy to validate boolean-like string inputs.

🎯 Simplified Error Customization API

Unifies various error customization approaches into a single error parameter, which can be a string or function, enabling concise and clear error definitions.
Reduces complexity and confusion when writing validations and handling errors.

🔀 More Powerful Discriminated Unions

Supports multiple schema types as discriminators, including unions, pipes, and nested objects.
Allows creating complex and maintainable type classifications for diverse data structures.

🔧 `.overwrite()` Method

Alternative to .transform() for applying data transformations without changing the inferred type, preserving type information.
Useful for simple data manipulation without breaking compatibility with JSON Schema or inferred types.

🧩 Zod Mini

A super lightweight functional API variant that removes excess methods to optimize tree-shaking, resulting in very small final bundles.
Perfect for front-end apps needing minimal download sizes while still using Zod for validation.

🚀 Conclusion

Zod 4 marks a significant advancement in TypeScript schema validation, offering enhanced performance, reduced bundle sizes, and a more intuitive API. With features like improved TypeScript compiler efficiency, a powerful metadata system, and streamlined error handling, Zod 4 is designed to meet the needs of modern development.

For comprehensive documentation, including guides on defining schemas, customizing errors, and integrating with JSON Schema, visit the official Zod 4 documentation: https://zod.dev/v4.

Happy coding! 😊

Why Frontend Developers Need to Know Docker?

Wild Boar Dev — Wed, 21 May 2025 10:00:03 +0000

1. What is Docker?

Docker is a software platform that allows you to create and run applications inside containers — lightweight environments packaging all necessary components like source code, libraries, runtime, and configurations to ensure the application runs consistently on any machine.

Unlike traditional virtual machines, Docker containers share the host OS kernel but isolate the application environment, making them fast, lightweight, and easy to deploy.

2. How Does Docker Help Frontend Developers?

Consistent development environment: Avoid the “it works on my machine but not on yours” problem by packaging the entire frontend environment into a container.
Simplified build and deployment: Docker helps build frontend apps (React, Next.js, Vue...) and run them on a standardized environment, minimizing errors during server or cloud deployment.
Easy collaboration with backend: When working with backend APIs, Docker allows running frontend and backend simultaneously in separate containers, simplifying management and overall testing.
Supports CI/CD pipelines: Docker enables building and testing frontend apps in identical environments, ensuring quality and speeding up deployment.
Saves setup time: No need to manually install many tools — just run a container with a ready environment for development or demo.

3. How Deep Should Frontend Developers Know Docker?

Frontend developers don’t need to master every Docker feature like backend or devops engineers but should:

Clearly understand what containers and Docker are.
Know how to write a simple Dockerfile to build and run frontend apps.
Use commands like docker build, docker run to test apps locally.
Understand mounting volumes and exposing ports for smooth development.
Be able to use basic Docker Compose when coordinating multiple services.

No need to dive deep into Docker networking, clustering, or advanced optimizations unless directly working with backend or devops.

4. Example: Creating a Next.js App and Dockerizing It

✅ Prerequisites

Before you start, ensure Docker is installed and running on your machine.

For Windows or Mac, download Docker Desktop at https://docs.docker.com/desktop/
For Linux, follow installation instructions at https://docs.docker.com/engine/install/

Check Docker installation with:

docker --version

Step 1: Create a Next.js app

npx create-next-app my-next-app
cd my-next-app
npm run dev

Step 2: Write a Dockerfile

Create a Dockerfile in your project folder with the following content:

# Build stage
# syntax=docker.io/docker/dockerfile:1

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED=1

RUN \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV=production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED=1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT=3000

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/config/next-config-js/output
ENV HOSTNAME="0.0.0.0"
CMD ["node", "server.js"]

Step 3: Build and run the container

docker build -t my-next-app .
docker run -p 3000:3000 my-next-app

Open your browser and go to http://localhost:3000 to see your Next.js app running inside the Docker container.

5. Conclusion 🎯

Docker is no longer just a tool for backend or devops — it’s becoming essential for frontend developers too. Knowing how to use Docker helps frontend devs work more professionally, synchronize development environments, and accelerate build, test, and deployment processes.

While deep expertise isn’t required, mastering basic Docker skills is a great advantage for any frontend developer wanting to expand their skillset and collaborate effectively in multi-team projects.

Stop Hesitating, Just Use React Or Any Modern Framework

Wild Boar Dev — Wed, 21 May 2025 02:22:21 +0000

Why does it matter?

The web today is no longer just a collection of simple static pages. It’s where businesses run, communities connect, and complex interactions happen. If you still think plain HTML and a few lines of manual JS are enough, you’re limiting yourself and your project.

What plain HTML can’t do but frameworks can

You might be proud of <details>, <dialog>, or basic forms. But building an app with:

Complex interactive UI

Frameworks handle dynamic interactions like modals, tabs, accordions, and tooltips that would require verbose JavaScript and DOM manipulation in plain HTML.

Multi-dimensional user state management

Plain HTML has no native support built-in state, components, context/shared state, ... But, tools like React’s useState, useReducer, or context APIs help manage complex app logic across components.

Real-time data updates

Frameworks make it easier to connect with APIs and WebSockets to update the UI in real-time without reloading the page.
→ Plus, re-rendering with React's state is much easier and cleaner than manually selecting elements with document.querySelector() and updating the DOM yourself.

Reusable, maintainable components

Component-based architecture allows you to build self-contained, testable, and reusable UI elements—plain HTML offers no such modularization.

And proper accessibility for all users

Frameworks provide powerful ways to manage ARIA attributes, keyboard navigation, and focus control dynamically, supporting a fully accessible experience out-of-the-box. Like this example:
<button aria-expanded={isOpen}>Menu</button>
The aria-expanded updates automatically as isOpen changes.

👉 Frameworks like React are powerful tools that help you handle all that complexity easily instead of wrestling with tons of manual DOM manipulation.

State management — the core of every modern app

Trying to manage state with global variables or direct DOM manipulation will only make your code messy and fragile. Frameworks provide clear state management systems that keep your app stable and scalable.

Reusable components — reduce duplication, boost productivity

Instead of copying and pasting HTML everywhere and fixing things in dozens of places, React lets you create reusable components. Change once, update everywhere. Keep your code clean, readable, and maintainable.

Smarter UI updates for better performance

No more manually tweaking every element when data changes. Frameworks optimize rendering to update only what’s necessary, making your app smooth and avoiding display bugs.

Accessibility — done right

Building interfaces that work for everyone, including users relying on assistive technologies, requires high technical standards that plain HTML can’t easily meet. Frameworks help you create components with built-in ARIA attributes, keyboard navigation, and all the essentials.

Developer experience matters too!

React and its tools help you develop faster with:

Hot reloads on code changes
Early error detection via TypeScript
Rich ecosystem of libraries
Effective debugging, avoiding browser quirks

Performance isn’t just about initial load speed

Complex apps need to feel responsive in every interaction. Modern frameworks, combined with server-side rendering, code splitting, and lazy loading, handle this perfectly.

When should you use React?

Your app has complex dynamic state to manage
You need to build complex UI with reusable components
It’s a SPA or web app, not just a static site
You work in a team and need clear structure
You want to leverage existing tools and libraries

Don’t fear the tool

Frameworks are just tools; the user is the real factor. Used right, they solve tons of problems. Used wrong, they can cause headaches. But avoiding powerful tools just because you “fear complexity” will only slow you down and cause more frustration.

In short: If you want to build modern, interactive web apps, don’t avoid React or similar frameworks. They’re the way to work efficiently and keep your code clean and maintainable.

Forem: Wild Boar Dev

Static Single Assignment (SSA)

1️⃣ What is SSA?

2️⃣ Example

Normal

Branching (if/else)

Loop (while)

3️⃣ What is the φ-function?

4️⃣ Why is SSA important?

5️⃣ Extensions and Variations of SSA

🎯 Conclusion

🔗 References

Intermediate Representation (IR): An Easy Overview

🗂️ Are there different types of IR?

1️⃣ HIR – High-level IR

2️⃣ MIR – Mid-level IR

3️⃣ LIR – Low-level IR

⁉️ How Compilers Understand IR?

⚒️ Tools that use IR

🎯 Conclusion

🔗 References

😊 Thanks for reading!

What Is an Abstract Syntax Tree (AST)? Explained Simply

🌳 What is an Abstract Syntax Tree?

🔧 What is AST used for?

🚀 Real-world Tools That Use AST

🎯 Conclusion

🔗 References:

😘 Thanks for reading!

Concept, Pattern, Structure and Architecture – What’s the Difference?

Quick Comparison:

In short:

Examples

💡 Concept

🛠️ Design Pattern

🏗️ Structure

🏛️ Architecture

References:

😊 Thanks for reading! Happy coding!

Install Fewer Libraries – Not to Be “Pure”, But to Be Smarter 🔻📦 👉 🎉

📌 Note before we begin:

🔰 Introduction

🎯 Benefits of Using Fewer Libraries

1️⃣ Smaller Bundles = Better Performance

2️⃣ Greater Control Over Your Codebase

3️⃣ Reduced Dependency Risk

4️⃣ Lower Technical Debt

5️⃣ Easier Maintenance & Upgrade Path

6️⃣ Deepen Your Understanding

⚖️ When Should You Use a Library?

🧪 Case Study: Context vs State Manager

❌ When You DON’T Need a Library:

✅ When You DO:

🚫 Don’t Be Extreme: Know When to Use a Library

📌 A Pre-Install Checklist

🎯 Conclusion

Why Type Is the Better Choice in React + TypeScript

1. Introduction

2. Comparing interface vs type

3. Which one fits better when coding React?

✅ type is more suitable in modern React

❗ Minor drawback of not using interface:

4. Conclusion 🎯

Understanding Stale Closure in React: A Common Pitfall and How to Avoid It

🧠 1. Overview of Stale Closure in React

📦 2. Recap: Scope & Closure in JavaScript

⚠️ 3. Common Cases of Stale Closure

a. Callback inside useEffect or useCallback

b. Async function in event handler

c. Event listeners or subscriptions

🛠️ 4. How to Fix It

5. Conclusion 🎯

React 19 Form Hooks vs react-hook-form: A Complete Comparison

🔍 1. Architecture & Philosophy

⚙️ 2. Form Submission & Handling

🔸 React 19

🔸 React Hook Form:

🧠 3. Validation

RHF Example with Zod:

🚀 4. Performance

2. Comparing `interface` vs `type`

✅ `type` is more suitable in modern React

❗ Minor drawback of not using `interface`:

a. Callback inside `useEffect` or `useCallback`

🔤 `z.stringbool()`

🔧 `.overwrite()` Method