DEV Community: TenE Organization

Mastering Conditional Rendering in React

TenE — Tue, 20 Jan 2026 18:30:00 +0000

What is Conditional Rendering?

In React, conditional rendering allows you to dynamically render different UI components based on certain conditions. You can use JavaScript logic such as if statements, the ternary operator (? :), the logical AND (&&), or assign JSX to variables.

Ways to Implement Conditional Rendering

1. Using if Statements

The simplest way to conditionally render components is by using if statements inside a function component.

Example:

function AlertMessage({ show }) {
  if (!show) {
    return null;
  }
  return <p className="alert">This is an alert message!</p>;
}

export default function App() {
  return <AlertMessage show={true} />;
}

In this example, if show is false, the component returns null and nothing is rendered.

2. Using Ternary Operator (`? :`)

The ternary operator is a compact way to return different JSX based on a condition.

Example:

function UserGreeting({ isLoggedIn }) {
  return <h1>{isLoggedIn ? "Welcome back!" : "Please sign in."}</h1>;
}

Here, if isLoggedIn is true, the message will be "Welcome back!", otherwise, it will be "Please sign in.".

3. Using Logical AND (`&&`) Operator

If you only need to render something when a condition is true, you can use the && operator.

Example:

function Notification({ messages }) {
  return (
    <div>
      {messages.length > 0 && <p>You have {messages.length} new messages.</p>}
    </div>
  );
}

If messages.length > 0, the paragraph will be displayed; otherwise, nothing is rendered.

4. Assigning JSX to a Variable

Using a variable allows for more readable and maintainable code when dealing with complex conditions.

Example:

function StatusMessage({ status }) {
  let message;
  if (status === "loading") {
    message = <p>Loading...</p>;
  } else if (status === "error") {
    message = <p>Error: Unable to fetch data.</p>;
  } else {
    message = <p>Data loaded successfully!</p>;
  }
  return <div>{message}</div>;
}

This approach improves readability when handling multiple conditions.

Best Practices

Keep it simple: If a conditional statement becomes too complex, consider extracting logic into separate functions.
Use early returns: Instead of deeply nesting ternary operators, use if statements with early returns when possible.
Be mindful of falsy values: 0, null, undefined, and false can cause unexpected behavior in logical && expressions.

Conclusion

Conditional rendering in React is an essential concept for building dynamic and responsive applications. Choose the approach that best fits your use case to keep your code clean and maintainable.

Optimize React Rendering with Lazy Loading and Code Splitting

TenE — Sat, 17 Jan 2026 18:30:00 +0000

Introduction

Code splitting is a technique that improves the performance of React applications by breaking the bundle into smaller chunks that are loaded only when needed. This helps reduce the initial load time and enhances the user experience.

Why Use Code Splitting?

Improved Performance: Reduces initial JavaScript payload size.
Faster Load Times: Loads only necessary code when required.
Efficient Resource Utilization: Minimizes unused code execution.

Implementing Code Splitting in React

React provides built-in support for code splitting via lazy and Suspense.

1. Using `lazy` for Lazy Loading

The React.lazy or lazy function allows you to load a component dynamically only when it is needed. Example:

import React, { Suspense, lazy } from "react";
const LazyComponent = lazy(() => import("./LazyComponent"));

function App() {
  return (
    <div>
      <h1>React Code Splitting</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

2. Code Splitting with React Router

When using React Router, you can split code by dynamically importing route components.

Example:

import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

3. Using Webpack's Dynamic Imports

Webpack supports dynamic imports using import(), which can be used to split code.

Example:

function loadComponent() {
  import("./DynamicComponent").then((module) => {
    const Component = module.default;
    // Render component dynamically
  });
}

Best Practices for Code Splitting

Split at Route Level: Load components dynamically for different pages.
Lazy Load Large Dependencies: Use lazy for libraries like charts or modals.
Optimize Bundle Splitting: Use Webpack's SplitChunksPlugin for optimized splitting.
Use Suspense for Fallback UI: Provide user-friendly loading indicators.

Conclusion

Code splitting is an essential technique to improve performance in React apps. By leveraging lazy, Suspense, and dynamic imports, you can enhance the user experience by reducing initial load times and loading components efficiently.

Props in React: Passing Data Between Components

TenE — Sat, 10 Jan 2026 18:30:00 +0000

What Are Props?

Props (short for "properties") are used to pass data from a parent component to a child component in React. Props make components reusable and dynamic.

Props are:

Immutable (Cannot be changed inside the component)
Passed from parent to child
Read-only

Using Props in Functional Components

Example: Passing Props to a Child Component

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="Alice" />;
}

export default App;

The Greeting component receives the name prop and displays "Hello, Alice!".

Using Props in Class Components (Older Method)

import React, { Component } from "react";

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

function App() {
  return <Greeting name="Alice" />;
}

export default App;

Functional components are preferred for props handling.

Default Props

You can set default values for props using defaultProps.

Example: Default Props in Functional Components

function Greeting({ name = "Guest" }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

or using defaultProps:

Greeting.defaultProps = {
  name: "Guest",
};

Props as Objects (`props` vs. Destructuring)

Props are passed as an object. You can access them directly using props or destructure them.

Using props object:

function User(props) {
  return <h1>{props.name} is {props.age} years old</h1>;
}

Using destructuring:

function User({ name, age }) {
  return <h1>{name} is {age} years old</h1>;
}

Destructuring is preferred for cleaner code.

Passing Functions as Props

Example: Child Component Calls Parent Function

function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

function App() {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return <Button onClick={handleClick} />;
}

export default App;

The onClick function is passed from App to Button.

Passing Components as Props (`children` Prop)

Props can also include React elements or components.

Example: Using children Prop

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h2>Title</h2>
      <p>This is content inside the card.</p>
    </Card>
  );
}

export default App;

The children prop lets you wrap elements inside a component.

Props vs. State (Key Differences)

Feature	Props ( Passed from Parent)	State ( Internal to Component)
Mutability	Immutable	Mutable
Where Defined?	Parent Component	Inside the Component
How to Update?	Cannot be changed	Use `useState()`

Summary

Props allow data flow from parent to child.
Props are immutable (read-only).
Props can be objects, functions, or even React elements.
Use children prop to pass JSX inside components.

Components in React: Functional vs. Class Components

TenE — Sun, 04 Jan 2026 18:30:00 +0000

What are React Components?

React components are reusable building blocks for UI. They allow you to break down a UI into smaller, independent pieces.

Types of Components in React

React has two types of components:

Functional Components (Modern, recommended)
Class Components (Older)

1. Functional Components (Recommended)

Functional components are JavaScript functions that return JSX.

Example of a Functional Component:

function Greeting() {
  return <h1>Hello, React!</h1>;
}

export default Greeting;

Why Use Functional Components?

Simpler and easier to read
No need for this keyword
Hooks (useState, useEffect) work only in functional components

2. Class Components (Older Method)

Class components use ES6 classes and render() to return JSX.

Example of a Class Component:

import React, { Component } from "react";

class Greeting extends Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

export default Greeting;

Why Avoid Class Components?

More complex syntax
this keyword can be confusing
Cannot use hooks like useState directly

State in Components

✅ State in Functional Components (Using useState)

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

❌ State in Class Components (Using this.state)

import React, { Component } from "react";

class Counter extends Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }

  increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increaseCount}>Increase</button>
      </div>
    );
  }
}

export default Counter;

Functional components with hooks (useState) are shorter and cleaner!

Props in Components

✅ Using Props in Functional Components

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Alice" />;

❌ Using Props in Class Components

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// Usage
<Welcome name="Alice" />;

Functional vs. Class Components: Comparison

Feature	Functional Components	Class Components
Syntax Simplicity	Simple & clean	More complex
Performance	Faster	Slightly slower
`this` Keyword	Not required	Required
State Management	`useState` hook	`this.state`
Lifecycle Methods	`useEffect` hook	`componentDidMount`, etc.
Recommended?	Yes	No (legacy)

Conclusion

Use functional components for better performance and readability.
Functional components support React Hooks (useState, useEffect).
Class components are outdated and should be avoided unless working with legacy code.

JSX in React

TenE — Wed, 31 Dec 2025 18:30:00 +0000

What is JSX?

JSX (JavaScript XML) is a syntax extension that allows you to write HTML inside JavaScript. It makes React components more readable and expressive.

JSX Example:

const element = <h1>Hello, JSX!</h1>;

Why Use JSX?

Readable & Intuitive – Looks like HTML inside JavaScript.
Prevents XSS Attacks – JSX escapes values automatically.
Full JavaScript Power – You can use JavaScript inside JSX.

JSX Syntax Rules

1. Only One Parent Element

✅ Correct:

return (
  <div>
    <h1>Hello</h1>
    <p>Welcome to React</p>
  </div>
);

❌ Incorrect:

return (
  <h1>Hello</h1>
  <p>Welcome to React</p>
);

Fix: Wrap elements inside a <div> or <> (fragment).

2. Use `className` Instead of `class`

✅ Correct:

return <h1 className="title">Hello, JSX!</h1>;

❌ Incorrect:

return <h1 class="title">Hello, JSX!</h1>;

Why? class is a reserved keyword in JavaScript.

3. Expressions in JSX Must Be Inside `{}`

✅ Correct:

const name = "React";
return <h1>Welcome to {name}!</h1>;

❌ Incorrect:

const name = "React";
return <h1>Welcome to name!</h1>;

4. Self-Closing Tags for Elements Without Children

✅ Correct:

return <img src="logo.png" alt="React Logo" />;

❌ Incorrect:

return <img src="logo.png" alt="React Logo"></img>;

Using JavaScript Inside JSX

Example: Dynamic Content in JSX

const age = 25;
return <p>{age >= 18 ? "Adult" : "Minor"}</p>;

Example: Calling Functions in JSX

function getGreeting(name) {
  return `Hello, ${name}!`;
}

return <h1>{getGreeting("React")}</h1>;

JSX Without Babel (Pure React)

Under the hood, JSX compiles into React.createElement().

JSX:

const element = <h1>Hello, JSX!</h1>;

Compiles to:

const element = React.createElement("h1", null, "Hello, JSX!");

JSX just makes writing React easier!

Summary

JSX lets you write HTML inside JavaScript.
Must have one parent element.
Use {} for JavaScript expressions.
Use className instead of class.
Self-close elements like <img />.

Setting Up a React Project with Vite

TenE — Sat, 27 Dec 2025 18:30:00 +0000

Why Set Up a React Project?

React needs a build tool to manage dependencies, compile JSX, and optimize performance. The two most popular ways to set up a React project are:

Create React App (CRA) – Official but slower and its now Sunset
Vite – Faster, modern alternative

Setting Up React with Vite

Vite is a modern build tool that offers:

Faster development server.
Better performance with ES modules.
Optimized production build.

Steps to Create a React App with Vite

1. Open Terminal & Run:

npm create vite@latest my-app --template react

or using Yarn:

yarn create vite@latest my-app --template react

or using pnpm:

pnpm create vite@latest my-app --template react

2. Navigate to the project folder:

cd my-app

3. Install dependencies:

npm install

4. Start the development server:

npm run dev

Vite For

Feature	Vite 🚀	CRA 🐢
Startup Speed	⚡ Instant	🐌 Slow
Build Speed	🔥 Fast	🚶‍♂️ Moderate
Uses Webpack?	❌ No (ES Modules)	✅ Yes
Production Build	✅ Optimized	⚠️ Heavier
Plugins Support	✅ Excellent (Rollup-based)	✅ Good (Webpack-based)

Ultimate React Hooks Guide

TenE — Sat, 20 Dec 2025 18:30:00 +0000

React Hooks are functions that let you "hook into" React state and lifecycle features from function components. They were introduced in React 16.8. Below is a list of common React hooks, their explanations, and examples of usage. Additionally, this guide covers how to create custom hooks.

1. useState

The useState hook lets you add state to function components.

Explanation

useState returns an array with two elements: the current state value and a function to update it.

Usage

import React, { useState } from 'react';

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

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

2. useEffect

The useEffect hook lets you perform side effects in function components.

`useEffect` With Dependencies

useEffect runs after the first render and after every update. You can also specify dependencies to control when the effect runs.

Usage

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

`useEffect` With an Empty Dependency Array []

Runs only once after the initial render (similar to componentDidMount).

useEffect(() => {
  console.log('This runs only once after the first render');
}, []);

Use case: Fetching data when the component mounts, setting up event listeners, etc.

`useEffect` Without Dependencies

Runs on every render (initial and subsequent re-renders).

useEffect(() => {
  console.log('This runs after every render');
});

Use case: Running code that doesn’t depend on specific state changes, like logging or animations.

Cleanup Function in useEffect

If useEffect returns a function, it acts as a cleanup that runs before the next effect or when the component unmounts.

useEffect(() => {
  const interval = setInterval(() => {
    console.log('Interval running...');
  }, 1000);

  return () => {
    clearInterval(interval); // Cleanup on unmount
  };
}, []);

Use case: Cleaning up event listeners, canceling API calls, clearing intervals, etc.

3. useContext

The useContext hook lets you access the value of a context.

Explanation

useContext accepts a context object (the value returned from React.createContext) and returns the current context value.

Usage

import React, { useContext } from 'react';

const MyContext = React.createContext();

function MyComponent() {
  const value = useContext(MyContext);

  return <div>{value}</div>;
}

function App() {
  return (
    <MyContext.Provider value="Hello, World!">
      <MyComponent />
    </MyContext.Provider>
  );
}

4. useReducer

The useReducer hook is an alternative to useState for managing complex state logic.

Explanation

useReducer returns an array with the current state and a dispatch function to trigger state updates.

Usage

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>
        Increment
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        Decrement
      </button>
    </div>
  );
}

5. useCallback

The useCallback hook returns a memoized callback.

Explanation

useCallback returns a memoized version of the callback that only changes if one of the dependencies has changed.

Usage

import React, { useState, useCallback } from 'react';

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

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, [count]);

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

6. useMemo

The useMemo hook returns a memoized value.

Explanation

useMemo only recomputes the memoized value when one of the dependencies has changed.

Usage

import React, { useState, useMemo } from 'react';

function ExpensiveCalculationComponent() {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState('');

  const expensiveCalculation = useMemo(() => {
    // Assume this is an expensive calculation
    return count * 2;
  }, [count]);

  return (
    <div>
      <p>Expensive Calculation: {expensiveCalculation}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
    </div>
  );
}

7. useRef

The useRef hook returns a mutable ref object.

Explanation

useRef is useful for accessing DOM elements or persisting values across renders.

Usage

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </div>
  );
}

8. useImperativeHandle

The useImperativeHandle hook customizes the instance value that is exposed when using ref.

Explanation

useImperativeHandle should be used with React.forwardRef.

Usage

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} />;
});

function Parent() {
  const inputRef = useRef();

  return (
    <div>
      <FancyInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
    </div>
  );
}

9. useLayoutEffect

The useLayoutEffect hook runs after all DOM mutations.

Explanation

useLayoutEffect is similar to useEffect, but it fires synchronously after all DOM mutations.

Usage

import React, { useLayoutEffect, useRef } from 'react';

function LayoutEffectComponent() {
  const divRef = useRef();

  useLayoutEffect(() => {
    console.log(divRef.current.getBoundingClientRect());
  });

  return <div ref={divRef}>Hello, world!</div>;
}

10. useDebugValue

The useDebugValue hook is used to display a label for custom hooks in React DevTools.

Explanation

useDebugValue can be helpful for debugging custom hooks.

Usage

import React, { useState, useDebugValue } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useDebugValue(isOnline ? 'Online' : 'Offline');

  // Imagine this is an actual implementation
  return isOnline;
}

11. Custom Hooks

Custom hooks let you extract component logic into reusable functions.

Explanation

Custom hooks are normal JavaScript functions that can call other hooks.

Example: useFetch

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

export default useFetch;

Usage of Custom Hook

import React from 'react';
import useFetch from './useFetch';

function App() {
  const { data, loading } = useFetch('https://api.example.com/data');

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

This guide provides a comprehensive overview of React hooks, their usage, and how to create custom hooks.

React Hooks Overview

TenE — Sat, 13 Dec 2025 18:30:00 +0000

Hook	Purpose	Basic Usage
`useState`	Adds state to function components	`const [count, setCount] = useState(0);`
`useEffect`	Performs side effects in function components	`useEffect(() => { console.log(count); }, [count]);`
`useContext`	Accesses values from a React context	`const value = useContext(MyContext);`
`useReducer`	Manages complex state logic	`const [state, dispatch] = useReducer(reducer, initialState);`
`useCallback`	Memoizes a callback function	`const memoizedFn = useCallback(() => { doSomething(); }, [dep]);`
`useMemo`	Memoizes a computed value	`const memoizedValue = useMemo(() => computeExpensiveValue(dep), [dep]);`
`useRef`	Returns a mutable reference	`const inputRef = useRef(null);`
`useImperativeHandle`	Customizes the instance exposed by `ref`	`useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus() }));`
`useLayoutEffect`	Runs synchronously after DOM mutations	`useLayoutEffect(() => { console.log('Layout effect'); });`
`useDebugValue`	Adds debug labels to custom hooks	`useDebugValue(isOnline ? 'Online' : 'Offline');`
Custom Hooks	Extracts reusable logic into a function	`function useFetch(url) { useEffect(() => { fetch(url); }, [url]); }`

Introduction to React

TenE — Sat, 06 Dec 2025 18:30:00 +0000

What is React?

React is a JavaScript library for building user interfaces. It was developed by Facebook (Meta) and is now open-source, widely used in web development.

Why Use React?

Component-Based Architecture – Build reusable UI components.
Virtual DOM – Efficient updates for better performance.
Declarative Syntax – Write cleaner and more readable code.
Strong Community & Ecosystem – Large support with many libraries.
Fast Learning Curve – Easy to get started, especially for JavaScript developers.

How React Works

React uses a Virtual DOM to optimize updates.
It breaks UI into components, which manage their own state.
React re-renders only the changed parts of the UI, improving performance.

Basic Example of React Component

import React from "react";

function Greeting() {
  return <h1>Hello, React!</h1>;
}

export default Greeting;

When to Use React?

Single Page Applications (SPA)
Dynamic UI Updates (e.g., dashboards, social media feeds)
Reusable UI Components (e.g., design systems)

Mastering Conventional Commits

TenE — Sat, 29 Nov 2025 18:30:00 +0000

Conventional Commits are a lightweight convention for structuring Git commit messages. This format uses a simple pattern ([optional scope]: ) to make commit history both human and machine friendly. By consistently tagging commits as features, fixes, docs updates, etc., teams can automatically generate changelogs, bump versions, and clearly communicate changes. In this post, we’ll break down the Conventional Commits spec, show examples, and explore tools like commit lint and semantic-release that leverage this convention.

Commit Message Format

Each Conventional Commit has three main parts: a type, an optional scope, and a brief description. The basic syntax is:

<type>[optional scope]: <description>
[optional body]
[optional footer(s)]

For example:

feat(auth): add OAuth2 login flow
fix(ui): correct button alignment on dashboard
docs(readme): update installation instructions

Here, feat, fix, docs, etc. are the types. A scope like (auth), (ui), or (readme) gives context (e.g. which part of the codebase is affected).

The description after the colon is a short imperative summary of the change (e.g. “add” not “added”), ideally no longer than 50 characters.

Optional bodies or footers can provide more detail. For breaking changes, you can either append ! after the type/scope or add a footer BREAKING CHANGE: ....

Tip: Keep the header line (type/scope/description) concise, and use the body to explain what and why, not how. Always write in present tense and imperative mood (e.g., “Add feature” instead of “Added feature”). This makes the log read like a list of commands or tasks.

Key Types

The official spec defines a few key types and their meanings:

feat: A new feature. Bumps the minor version in Semantic Versioning.
fix: A bug fix. Bumps the patch version.
BREAKING CHANGE: Marks a change that breaks backward compatibility. This can be indicated by ! in the header or a BREAKING CHANGE: ... footer. Breaking changes bump the major version.
Additional types: Other common categories include chore (maintenance tasks), docs (documentation), style (formatting), refactor, perf (performance), ci (CI config), build, test, etc.

These have no direct SemVer impact unless paired with a breaking change.

For example:

feat(ui): implement dark mode toggle
fix(api): validate input parameters
docs(config): clarify environment variable names
chore: update dependencies to latest versions
perf(db): improve query speed
BREAKING CHANGE: remove support for Node 8 in runtime

Using Scopes and Descriptions

The scope (in parentheses) adds context about what the commit affects. Scopes are optional but useful in larger projects. For instance, feat(parser) vs. feat(renderer) immediately tells developers which subsystem changed. Multiple scopes are possible (e.g., (core/server)), but one clear scope is usually enough.

The description after the colon should be a succinct, imperative summary. Make it clear what changed. Avoid vague terms. For example, prefer:

fix(auth): handle expired tokens correctly

over

fix: auth stuff

If more detail is needed, include a longer body separated by a blank line, or use footers for references (e.g. Refs: #123, Reviewed-by: Name). The conventional spec even shows multi-line examples:

fix(cache): prevent stale data
Use a request ID to track cache validity. Remove old timeout logic.
Reviewed-by: @alice
Fixes: #42

Clear Commit Messages

Good commit messages are as important as clean code. A helpful guideline: write the header like a commit to the current state, e.g. “Add user sign-out button” (not “Added ...”).

The first word should be capitalized only if it’s a proper noun (types are usually lowercase). Keep line lengths to ~50-72 characters. If the commit requires explanation, use the body and footers. Over time, this makes version control logs a clear story of changes.

Benefits of Conventional Commits

Using Conventional Commits brings many advantages:

Automated Changelogs: Tools can parse commit types and auto-generate CHANGELOG.md entries.
Semantic Versioning: Commit types (feat/fix/major) map to SemVer rules, so release tooling can bump versions automatically.
Clear Communication: Teammates and stakeholders instantly understand the nature of each commit.
CI/CD Triggers: Automated pipelines (like deploying to staging on new feat commits) become easier to configure.
Easier Collaboration: A consistent format lowers the barrier for new contributors and reviewers. PRs with tidy commit history are simpler to audit.

In short, Conventional Commits make your git history systematic. The changelog and version reflect what changed, not who wrote it. As the spec notes, this “dovetails with SemVer” and lets you “write automated tools on top of” your commit history.

Tooling: commitlint and semantic-release

Several tools work hand-in-hand with Conventional Commits:

commitlint: A CLI tool that checks commit messages against your rules. It often uses the @commitlint/config-conventional preset which enforces Conventional Commits. You can set it up with Husky to lint commits on the fly. For example:

  npm install --save-dev @commitlint/cli @commitlint/config-conventional husky
  npx husky install
  echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
  npx husky add .husky/commit-msg "npx --no-install commitlint --edit \"$1\""

Now, if a commit message doesn’t match (e.g. missing type or too long), commitlint will block it. It enforces patterns like type(scope?): subject and common types (build, chore, ci, docs, feat, fix, perf, refactor, style, test). This ensures everyone follows the spec.

semantic-release: A fully automated release manager. It reads your Conventional Commits to decide version bumps, generate release notes, and publish packages. For example, commits tagged fix: produce a patch release, feat: a minor release, and any BREAKING CHANGE a major bump. A typical setup adds semantic-release to CI:

  npm install --save-dev semantic-release @semantic-release/commit-analyzer @semantic-release/release-notes-generator @semantic-release/changelog @semantic-release/github

Configure it (e.g. in .releaserc.json):

  {
    "branches": ["main"],
    "plugins": [
      "@semantic-release/commit-analyzer",
      "@semantic-release/release-notes-generator",
      "@semantic-release/changelog",
      "@semantic-release/github"
    ]
  }

Then in CI (GitHub Actions example):

  on:
    push:
      branches: [main]

  jobs:
    release:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v3
        - run: npm ci
        - run: npx semantic-release

With this, every merge to main triggers semantic-release. It inspects commits, bumps the package version (e.g. in package.json), updates CHANGELOG.md, and creates a GitHub release automatically.

Conclusion

Conventional Commits are a simple, powerful way to standardize your commit messages and unlock automation. By using types like feat:, fix:, docs:, and a clear description, teams gain immediate benefits: automated changelogs, consistent versioning, and smoother collaboration. Paired with tools like commitlint and semantic-release, you can enforce this convention and automate your release workflow. Start tagging your commits today, and make your project’s history a clear, machine-readable story.

Mastering console in JavaScript

TenE — Sat, 22 Nov 2025 18:30:00 +0000

The console object in JavaScript is a powerful tool for developers. While most use it for simple debugging with console.log, it offers many other useful methods. This blog explores the various functionalities of console and how to leverage them efficiently.

1. Basic Logging

`console.log()`

The most commonly used method to print messages:

console.log("Hello, World!");

`console.error()`

Used to display error messages:

console.error("This is an error message");

`console.warn()`

Used to show warnings:

console.warn("This is a warning");

2. Advanced Console Methods

`console.table()`

Displays tabular data in an easy-to-read format:

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];
console.table(users);

`console.group()` and `console.groupEnd()`

Groups console messages together:

console.group("User Details");
console.log("Name: Alice");
console.log("Age: 25");
console.groupEnd();

`console.count()`

Counts the number of times a function or message has been logged:

console.count("Loop iteration");
console.count("Loop iteration");

`console.time()` and `console.timeEnd()`

Measures the execution time of a block of code:

console.time("Processing");
for(let i = 0; i < 1000000; i++) {}
console.timeEnd("Processing");

3. Debugging with Console

`console.assert()`

Logs a message only if an assertion fails:

console.assert(2 + 2 === 5, "Math error!");

`console.trace()`

Prints a stack trace:

function a() { b(); }
function b() { c(); }
function c() { console.trace("Trace here"); }
a();

Silent Debugging with `debugger`

Use debugger; in your code to trigger breakpoints:

function test() {
  debugger;
  console.log("Debugging starts here!");
}
test();

4. Customizing Console Output

String Substitutions

You can use placeholders for better readability:

console.log("My name is %s and I am %d years old", "Alice", 25);

CSS Styling in Console

You can style console messages using CSS:

console.log("%cStyled message", "color: blue; font-size: 20px;");

5. Console Aliases

Many browsers provide shortcuts for console methods:

console.dir(document.body); // Displays detailed properties of an object
console.clear(); // Clears the console

6. Using `console.log()` in Different Environments

Browser Console (F12 or DevTools)
Node.js Console (Command line)
Web Workers (Limited logging capabilities)

Conclusion

The JavaScript console object is more than just console.log(). It provides powerful debugging features, performance tracking, and better logging formats. Mastering these methods will improve your debugging efficiency and code clarity.

Understanding err, stdout, and stderr in Node.js

TenE — Sat, 15 Nov 2025 18:30:00 +0000

When executing shell commands in Node.js using the child_process module, three critical elements shape the command's outcome: err, stdout, and stderr. Grasping their roles is vital for effective debugging and error handling. This guide dives into their differences and offers best practices to master them.

What is `stdout`?

stdout (Standard Output) is the stream where a command’s successful output is sent. It holds the expected results of a command, free of error messages.

Example: Capturing stdout

import { exec } from 'child_process';

exec('echo "Hello, World!"', (err, stdout, stderr) => {
  console.log(`STDOUT: ${stdout}`);
});

Output:

STDOUT: Hello, World!

Key Points:

Contains the command’s standard output.
Excludes error messages (those are routed to stderr).

What is `stderr`?

stderr (Standard Error) is the stream dedicated to error messages produced by a command. It captures issues even if the command doesn’t completely fail.

Example: Capturing stderr

import { exec } from 'child_process';

exec('ls nonexistent-folder', (err, stdout, stderr) => {
  console.error(`STDERR: ${stderr}`);
});

Output:

STDERR: ls: nonexistent-folder: No such file or directory

Key Points:

Captures error messages from the command.
May contain output even if err is null.

What is `err`?

The err argument in exec is a Node.js error object that delivers high-level details about a command’s failure, including:

Command failure messages
Exit codes
Execution errors (e.g., file not found, permission denied)

Example: Checking err

import { exec } from 'child_process';

exec('ls nonexistent-folder', (err, stdout, stderr) => {
  if (err) {
    console.error(`Error Message: ${err.message}`);
    console.error(`STDERR: ${stderr}`);
  }
});

Output:

Error Message: Command failed: ls nonexistent-folder
STDERR: ls: nonexistent-folder: No such file or directory

Key Points:

Provides execution context, unlike stderr.
Appears only when the command fails to execute.
If a command runs but outputs an error, err may be null while stderr has content.

Using `execSync`: Synchronous Handling

With execSync, errors are thrown as exceptions rather than passed to a callback, requiring a different handling approach.

Example: Handling Errors with execSync

import { execSync } from 'child_process';

try {
  const output = execSync('ls nonexistent-folder').toString();
  console.log(output);
} catch (err) {
  console.error(`Caught Error: ${err.message}`);
  console.error(`STDERR Output: ${err.stderr.toString()}`);
}

Output:

Caught Error: Command failed: ls nonexistent-folder
STDERR Output: ls: nonexistent-folder: No such file or directory

Key Points:

Errors are thrown and must be caught with try/catch.
err.message offers high-level failure details.
err.stderr provides the command’s error output.

Key Differences: `err` vs. `stdout` vs. `stderr`

Feature	`stdout` (Output)	`stderr` (Error Output)	`err` (Error Object)
Purpose	Normal command output	Error messages	Node.js error details
When it’s used	Successful output	Command prints errors	Command fails entirely
Exists if succeeds?	✅ Yes	❌ No	❌ No
Exists if fails?	❌ No	✅ Yes	✅ Yes

Best Practices for Error Handling

Always Check err First
Verify the command executed successfully before relying on stdout or stderr.

import { exec } from 'child_process';

exec('ls nonexistent-folder', (err, stdout, stderr) => {
  if (err) {
    console.error(`Error: ${err.message}`);
    return;
  }
  console.log(`Output: ${stdout}`);
});

Use try/catch with execSync
Prevent crashes by wrapping synchronous calls in error handling.

import { execSync } from 'child_process';

try {
  const output = execSync('some-command').toString();
  console.log(output);
} catch (err) {
  console.error(`Error: ${err.message}`);
}

Log stderr Separately
Keep normal output and errors distinct for better debugging.

import { exec } from 'child_process';

exec('some-command', (err, stdout, stderr) => {
  console.log(`STDOUT: ${stdout}`);
  console.error(`STDERR: ${stderr}`);
});

Conclusion

Mastering err, stdout, and stderr empowers you to handle command execution in Node.js with confidence:

Use stdout for normal output.
Use stderr for error messages.
Use err to manage execution failures.

By applying these concepts and best practices, you’ll create robust, error-resistant Node.js applications.

Happy coding! 🚀

DEV Community: TenE Organization

Mastering Conditional Rendering in React

What is Conditional Rendering?

Ways to Implement Conditional Rendering

1. Using if Statements

Example:

2. Using Ternary Operator (? :)

Example:

3. Using Logical AND (&&) Operator

Example:

4. Assigning JSX to a Variable

Example:

Best Practices

Conclusion

Optimize React Rendering with Lazy Loading and Code Splitting

Introduction

Why Use Code Splitting?

Implementing Code Splitting in React

1. Using lazy for Lazy Loading

2. Code Splitting with React Router

3. Using Webpack's Dynamic Imports

Best Practices for Code Splitting

Conclusion

Props in React: Passing Data Between Components

What Are Props?

Using Props in Functional Components

Using Props in Class Components (Older Method)

Default Props

Props as Objects (props vs. Destructuring)

Passing Functions as Props

Passing Components as Props (children Prop)

Props vs. State (Key Differences)

Summary

Components in React: Functional vs. Class Components

What are React Components?

Types of Components in React

1. Functional Components (Recommended)

2. Class Components (Older Method)

State in Components

Props in Components

Functional vs. Class Components: Comparison

Conclusion

JSX in React

What is JSX?

Why Use JSX?

JSX Syntax Rules

1. Only One Parent Element

2. Use className Instead of class

3. Expressions in JSX Must Be Inside {}

4. Self-Closing Tags for Elements Without Children

Using JavaScript Inside JSX

JSX Without Babel (Pure React)

Summary

Setting Up a React Project with Vite

Why Set Up a React Project?

Setting Up React with Vite

Steps to Create a React App with Vite

Vite For

Ultimate React Hooks Guide

1. useState

Explanation

Usage

2. useEffect

useEffect With Dependencies

Usage

useEffect With an Empty Dependency Array []

useEffect Without Dependencies

Cleanup Function in useEffect

3. useContext

Explanation

Usage

4. useReducer

Explanation

Usage

5. useCallback

Explanation

Usage

6. useMemo

Explanation

Usage

2. Using Ternary Operator (`? :`)

3. Using Logical AND (`&&`) Operator

1. Using `lazy` for Lazy Loading

Props as Objects (`props` vs. Destructuring)

Passing Components as Props (`children` Prop)

2. Use `className` Instead of `class`

3. Expressions in JSX Must Be Inside `{}`

`useEffect` With Dependencies

`useEffect` With an Empty Dependency Array []

`useEffect` Without Dependencies

`console.log()`

`console.error()`

`console.warn()`

`console.table()`

`console.group()` and `console.groupEnd()`

`console.count()`

`console.time()` and `console.timeEnd()`

`console.assert()`

`console.trace()`

Silent Debugging with `debugger`

6. Using `console.log()` in Different Environments

What is `stdout`?

What is `stderr`?

What is `err`?

Using `execSync`: Synchronous Handling

Key Differences: `err` vs. `stdout` vs. `stderr`