DEV Community: TOOSRIET

The React Folder Structure Exposé: From Newbie to Code Mastery Style

TOOSRIET — Mon, 17 Feb 2025 13:05:05 +0000

When building React applications, the way you organize your files can impact both development speed and long-term maintainability. In this article, we will start with a basic structure suitable for beginners, move to an intermediate approach, and finally detail a complex, feature-based organization. Each level comes with its benefits and potential challenges.

1. Beginner Folder Structure

For newcomers or simple projects, a flat folder structure works well. Most tools (like Create React App) generate a basic project without a lot of sub-folders.

Example Structure

my-react-app/
├── public/
│   ├── index.html
│   └── favicon.ico
└── src/
    ├── index.js
    ├── App.js
    ├── App.css
    └── index.css

Pros ✅

Simplicity: New developers can quickly see where everything is. There isn’t much boilerplate to understand.
Quick Setup: With a few files to manage, you can rapidly start building your UI and logic.
Ideal for Small Projects: If you are building a prototype or a tiny application, this structure minimizes overhead.

Cons ❌

Limited Scalability: As you add more components, pages, and logic, the file structure can become cluttered and challenging to maintain.
Poor Separation of Concerns: UI, business logic, and styling are all mixed together. It may become unclear where to locate or update specific functionality.
Difficult Maintenance: In a growing codebase or when working within a team, quickly finding the right file for a specific feature becomes a challenge.

2. Intermediate Folder Structure

As your project grows, you might want to separate files by their roles or responsibilities. An intermediate structure achieves this by creating folders like components, pages, and hooks.

Example Structure

my-react-app/
├── public/
│   ├── index.html
│   └── favicon.ico
└── src/
    ├── index.js
    ├── App.js
    ├── assets/
    │   ├── images/
    │   └── styles/     # Global styles and variables
    ├── components/
    │   ├── common/     # Reusable UI components (buttons, inputs, etc.)
    │   └── specific/   # Components dedicated to a specific part of the app
    ├── pages/          # Container components for routes (e.g., Home, About)
    ├── hooks/          # Custom hooks
    ├── context/        # React Context providers if needed
    ├── services/       # API calls and external service integrations
    └── utils/          # Helper functions and utilities

Pros ✅

Clearer Organization: Grouping files by type makes it easier to locate assets, components, pages, and shared code.
Enhanced Maintainability: Reusable logic (like custom hooks or utility functions) is centralized, making changes easier.
Better Collaboration: With clearly defined responsibilities, team members can work on different layers (UI, API, state management) independently.

Cons ❌

Scattering of Feature-Specific Logic: Consider a feature like a blog post. The UI may reside in components/, the API calls in services/, and custom logic in hooks/. This separation can make it harder to see how pieces interrelate.
Potential Overkill for Small Projects: For a simple or starting application, creating many folders might seem like over-engineering.
Multiple Navigation Points: Developers might have to jump between several directories to amend a single feature, potentially slowing down development if not carefully documented.

3. Advanced / Complex (Feature-Based) Folder Structure

Advanced projects may benefit from a feature-based or domain-driven structure. This strategy encapsulates all related files—UI components, state management, hooks, API calls—for a given feature in one place.

Example Structure

my-react-app/
├── public/
│   ├── index.html
│   └── favicon.ico
└── src/
    ├── index.js
    ├── App.js
    ├── assets/
    │   ├── images/
    │   └── styles/       # Global styles and themes
    ├── components/       # Generic, reusable components across features
    ├── features/
    │   ├── blog/
    │   │   ├── components/  # Blog-specific UI components
    │   │   ├── hooks/       # Custom hooks for blog functionality
    │   │   ├── services/    # API calls and business logic for blog
    │   │   └── blogSlice.js # Redux slice or local state management for blog
    │   └── user/
    │       ├── components/
    │       ├── hooks/
    │       ├── services/
    │       └── userSlice.js
    ├── store/            # Global state management (e.g., Redux store)
    │   ├── index.js
    │   └── configuration.js
    ├── hooks/            # Global hooks (e.g., useAuth, useMediaQuery)
    ├── context/          # Global context providers, if using Context API
    ├── utils/            # Shared helper functions
    └── tests/            # Unit and integration tests

Pros ✅

Feature Encapsulation: All files related to a specific feature (UI, state, API, etc.) are grouped together. This makes the codebase more maintainable and easier to understand.
Improved Scalability: New features can be added as separate modules under the features/ folder without disrupting the overall structure.
Reduced Merge Conflicts: Different teams can work on separate features independently since each feature is self-contained.
Easier Refactor & Reuse: If a feature needs to be reused in another project or a significant refactor is necessary, the self-contained nature of the feature makes the process simpler.

Cons ❌

Initial Overhead for Small Projects: This structure might be too robust and complicated for small-scale applications.
Risk of Duplication: Without proper management, utility functions or shared components may get duplicated across feature folders. It is important to extract truly shared logic into a common directory.
Learning Curve: Team members new to the project might need some time to understand the feature-based layout before they can navigate effectively.

How the Advanced Structure Solves Issues from Lower Levels

Improving Scalability: The beginner folder structure quickly becomes cluttered as the project expands. Moving to an intermediate setup offers file type separation, but it may still scatter feature-specific logic across multiple directories. The advanced structure consolidates everything related to one feature into one area, making it easier to manage a growing codebase.
Enhancing Maintainability: In the intermediate model, developers might struggle to locate and update all parts of a single feature. The feature-based approach encapsulates all the necessary components, state management, and service calls, simplifying maintenance and debugging.
Facilitating Team Collaboration: With the advanced structure, teams can work on separate features autonomously. This minimizes conflicts and streamlines code reviews since resources and logic for each feature are isolated from one another.

Conclusion

Choosing the right folder structure is essential for maintaining code quality and team productivity.

The Beginner Structure keeps things simple and is perfect for small apps or prototypes but quickly becomes unmanageable with growth.
The Intermediate Structure introduces clear separations by file type, making things easier to navigate but often scatters feature logic.
The Advanced (Feature-Based) Structure provides a scalable, maintainable, and team-friendly architecture by grouping all parts of a feature together—even though it may add some initial complexity.

By starting with a simpler structure and evolving to a feature-based organization as your project grows, you can balance simplicity with maintainability and scalability, ensuring that your React application remains robust as its complexity increases.

Happy coding!

18+ Questions to Challenge and Expand Your Babel Knowledge

TOOSRIET — Sat, 15 Feb 2025 08:56:12 +0000

Table of Contents
0. Intro
1. Babel Fundamentals and Syntax Transformations
- What is Babel and why we need it?
- How does Babel work?
- Describe how Babel transforms modern JavaScript syntax such as arrow functions, async/await, and generators under the hood.
2. Babel Configuration and Setup
- How can Babel be configured in a project?
- What is the difference between Babel “presets” and “plugins”?
- How would you set up Babel for a React project and what additional presets or plugins might you use?
3. Compatibility and Debugging Tools
- What is @babel/polyfill and why we need it?
- What are source maps and why would you configure Babel to generate them?
4. Performance Optimizations and Plugin Management
- How does Babel utilize caching to improve performance, especially during development?
- How do you implement custom Babel plugins? Provide an outline of creating a plugin that logs every function entry.
- Is Babel plugin order important?
- Example Scenario

0. Intro

In today's fast-paced world, where advanced AI technologies are emerging rapidly, staying competitive by quickly acquiring cutting-edge knowledge is essential. This motivation inspired me to create this concise document.

For beginners, I hope it provides a clear introduction to the key concepts of Babel, allowing you to dive right in.
For experienced users, I hope you'll find it a valuable resource to further challenge and expand your Babel expertise.
Please feel free to share any feedback or suggestions for improvement.

1. Babel Fundamentals and Syntax Transformations

What is Babel and why we need it?

Babel is a JavaScript compiler. It is used to convert modern JavaScript code into older versions (or "transpile") that older browsers can understand.

Example:

Modern code:

const sum = (a, b) => a + b;

Transpiled code:

function sum(a, b) {
  return a + b;
}

Browser Compatibility:

Browser	Version	Cannot Use
Internet Explorer	IE 11	- Arrow functions (=>) - let/const declarations - Classes - Template literals (``)
Safari	< 10	- async/await - Array.includes() - Object spread operators {...obj}
Chrome	< 49	- Default parameters - Destructuring - Generator functions
Firefox	< 52	- async/await - Rest parameters - ES modules (import/export)

This is why we need Babel—it allows us to write modern JavaScript while ensuring our code works in older browsers through transpilation.

How does Babel work?

Babel transforms code through a three-step process:

Parsing: The source code is read and converted into an Abstract Syntax Tree (AST), which represents the code structure.
Transformation: Babel traverses the AST and applies plugins that modify it—replacing modern syntax with equivalent, older JavaScript constructs.
Code Generation: Finally, Babel generates new JavaScript code from the transformed AST.

For more information on ASTs, you can read this article on the Abstract Syntax Tree.

Describe how Babel transforms modern JavaScript syntax such as arrow functions, async/await, and generators under the hood.

Babel first parses your code to create an Abstract Syntax Tree (AST). It then traverses the AST using a plugin system:

Arrow Functions:

Babel converts them into traditional function expressions, while ensuring the correct binding of the lexical this.
Async/Await:

Babel rewrites them into a generator-based workflow (often using a helper like regeneratorRuntime) or into promise-based chains, simulating asynchronous behavior.
Generators:

Babel transforms generators into state machine-like constructs that mimic the iterator behavior in environments without native support.

This systematic transformation driven by AST manipulation enables Babel to support many modern language features.

2. Babel Configuration and Setup

How can Babel be configured in a project?

Babel can be configured in several ways:

.babelrc File:

A JSON file at the project root that specifies presets and plugins for Babel.
babel.config.js:

A JavaScript configuration file that offers dynamic configuration options and is especially useful in monorepos or projects with multiple packages.
package.json:

Babel settings may also be included in the "babel" field within your package.json.

The choice depends on your project’s complexity. Simple projects often use a .babelrc, while more complex or multi-package projects benefit from the flexibility of babel.config.js.

What is the difference between Babel “presets” and “plugins”?

Plugins:

These are individual modules that handle specific code transformations. For example, a plugin might transform arrow functions, object spread, or other particular syntax.
Presets:

These are collections of plugins bundled together to provide a broader transformation capability. For example, @babel/preset-env includes many plugins that together enable support for modern JavaScript based on your target environments.

Using presets simplifies configuration because you can include a full set of related transformations with a single entry.

How would you set up Babel for a React project and what additional presets or plugins might you use?

To set up Babel for a React project, you would typically use the following presets and plugins:

@babel/preset-react:

Designed for React code, it includes plugins for features such as JSX.
@babel/preset-env:

Used to transform modern JavaScript into backward-compatible versions for your target environments.

A typical .babelrc might look like:

`json { "presets": ["@babel/preset-env", "@babel/preset-react"] } `

3. Compatibility and Debugging Tools

What is @babel/polyfill and why we need it?

Babel’s transformation works in two phases:

Syntax Transformation: Converts modern JavaScript syntax into older JavaScript.
Polyfilling: Backfills new implementations introduced in modern JavaScript for older environments.

Historically, @babel/polyfill was used to handle necessary polyfills. However, since Babel 7.4.0, @babel/polyfill has been deprecated. The recommended approach now is to:

Install core-js and regenerator-runtime separately.
Use the useBuiltIns option in @babel/preset-env:
- "entry": Requires an explicit import of core-js/stable and regenerator-runtime/runtime at the top of your entry file.
- "usage": Instructs Babel to include polyfills automatically wherever they're needed in your code.

This approach provides better control and potentially smaller bundle sizes, as you only include what is needed.

What are source maps and why would you configure Babel to generate them?

Source maps help map the transformed code back to the original source code. This is especially useful for debugging; if an error occurs in the transpiled code, developers can refer to the source map to see the corresponding location in the original code.

To configure Babel to generate source maps, you can add the following configuration:

`json { "sourceMaps": true } `

4. Performance Optimizations and Plugin Management

How does Babel utilize caching to improve performance, especially during development?

When used with tools like babel-loader, Babel caches the output of file transformations based on a file hash. On rebuilds, unchanged files are retrieved from this cache (commonly stored in a directory like node_modules/.cache), significantly accelerating the build process during development.

How do you implement custom Babel plugins? Provide an outline of creating a plugin that logs every function entry.

To create a custom Babel plugin, follow these steps:

Create a Plugin File:

For instance, create a new JavaScript file (e.g., my-plugin.js).
Export a Function:

The function should adhere to the Babel plugin API, receiving an argument (commonly named babel which includes type helpers).
Define Visitor Methods:

Implement visitors for function nodes (both function declarations and expressions).
Insert Logging Code:

Use Babel's type helpers (t) to construct a console.log node and inject it at the beginning of each function.

Example Implementation:

`javascript
// my-plugin.js
module.exports = function ({ types: t }) {
return {
visitor: {
Function(path) {
// Determine function name, falling back to 'anonymous'
const functionName =
path.node.id && path.node.id.name ? path.node.id.name : "anonymous";

    // Create a console.log statement
    const logStatement = t.expressionStatement(
      t.callExpression(
        t.memberExpression(t.identifier("console"), t.identifier("log")),
        [t.stringLiteral(`Entering function ${functionName}`)]
      )
    );

    // If the function body is a block statement, insert the log statement at the start
    if (t.isBlockStatement(path.node.body)) {
      path.node.body.body.unshift(logStatement);
    }
  },
},

};
};
`

This plugin will traverse every function node and prepend a logging statement at the start of its body.

Is Babel plugin order important?

Yes, the order of Babel plugins is important. Babel processes plugins in the sequence they appear in your configuration, which means that when multiple plugins target the same node types, the order can affect the final transformation.

Example Scenario

Consider two plugins:

Plugin A: Transforms every identifier named "foo" into "bar".
Plugin B: Transforms every identifier named "bar" into "baz".

Scenario 1: Plugin A first, then Plugin B

`javascript // babel.config.js module.exports = { plugins: [ "./plugin-foo-to-bar.js", // Plugin A "./plugin-bar-to-baz.js", // Plugin B ], }; `

Source Code:

`javascript const foo = 42; console.log(foo); `

Transformation Process:

Plugin A: "foo" becomes "bar", resulting in:

`javascript const bar = 42; console.log(bar); `

Plugin B: "bar" becomes "baz", resulting in: `javascript const baz = 42; console.log(baz); `

Scenario 2: Plugin B first, then Plugin A

`javascript // babel.config.js module.exports = { plugins: [ "./plugin-bar-to-baz.js", // Plugin B "./plugin-foo-to-bar.js", // Plugin A ], }; `

Transformation Process:

Plugin B:

Checks for "bar" but finds "foo" so nothing changes.
Plugin A:

Converts "foo" to "bar", resulting in:
`javascript const bar = 42; console.log(bar); `

This example demonstrates that plugin order can directly impact the output of your code transformations.

18+ Questions to Challenge and Expand Your Webpack Knowledge

TOOSRIET — Sat, 08 Feb 2025 16:39:17 +0000

Table of Contents
0. Intro
1. Introduction & Basic Concepts
- What is Webpack?
- What is the most common webpack version?
- What is a bundle?
- Why do we need bundles?
2. How Webpack Works & How to Configure It
- How does Webpack work?
- How do we configure Webpack?
3. Loaders & Plugins
- What is the role of Loaders in Webpack?
- What are Plugins in Webpack and how do they extend its functionality?
4. Code Optimization Techniques
- What is Tree Shaking in Webpack?
- What is Code Splitting and why is it beneficial?
5. Development Tools & Modes
- What is the role of the Webpack Dev Server?
- What are Source Maps and how are they used in Webpack?
- What is the difference between development and production mode in Webpack?
6. Bundle Analysis & Caching Strategies
- How can you analyze the bundle size?
- How does Webpack make sure the client gets the latest version of the bundle?
7. Build Performance Optimization Strategies
- What are some strategies to optimize Webpack build performance?
8. Environment Variables & TypeScript Integration
- What are Environment Variables and how can they be integrated in Webpack?
- How do you use Webpack with TypeScript?
9. Troubleshooting & Common Pitfalls
- What are some common pitfalls when configuring Webpack?
- How do you debug problems in the Webpack build process?

0. Intro

For beginners, I hope it provides a clear introduction to the key concepts of Webpack, allowing you to dive right in.
For experienced users, I hope you'll find it a valuable resource to further challenge and expand your Webpack expertise. Please feel free to share any feedback or suggestions for improvement.

1. Introduction & Basic Concepts

What is Webpack?

Webpack is a tool that bundles your code into a single file. It is a popular tool for building modern JavaScript applications.

What is the most common webpack version?

The most common version of Webpack is 5.

What is a bundle?

A bundle is a single file that contains all of the code for your application. It is the output of the Webpack build process.

Why do we need bundles?

Bundles are necessary because modern JavaScript applications are made up of many small files for better organization and performance.

These files need to be bundled together so that they can be served to the browser.

2. How Webpack Works & How to Configure It

How does Webpack work?

Webpack works by analyzing your code and creating a dependency graph. This graph is used to determine which files need to be bundled together.

Example:

// index.js
import { add } from './math.js';

const sum = add(1, 2);
console.log(sum);

// math.js
export function add(a, b) {
    return a + b;
}

In this example, the math.js file is a dependency of the index.js file. Webpack will create a dependency graph that includes the index.js file and the math.js file.

How do we configure Webpack?

Webpack is configured using a webpack.config.js (or similar) file that typically specifies:

Entry: The starting point(s) of your application. This is the file that will be used to create the dependency graph.
Output: Where and how bundles are output.
Loaders: Modules that transform files (e.g., transpile JavaScript, compile Sass).
Plugins: Extensions that add functionality (e.g., optimizing bundles, injecting environment variables).

Example:

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
        }),
    ],
};

3. Loaders & Plugins

What is the role of Loaders in Webpack?

Loaders allow you to preprocess files as they are added to your dependency graph. For instance, you can use:

babel-loader: To transpile ES6+ JavaScript to older versions.
css-loader & style-loader: To handle CSS imports.
file-loader / url-loader: To process images, fonts, and other assets.

What are Plugins in Webpack and how do they extend its functionality?

Plugins are powerful tools that tap into Webpack's build process to perform a wide range of tasks such as:

Optimizing and minifying bundles (e.g., using TerserPlugin).
Generating HTML files that include your bundles (e.g., using HtmlWebpackPlugin).
Extracting CSS into separate files (e.g., using MiniCssExtractPlugin).

4. Code Optimization Techniques

What is Tree Shaking in Webpack?

Tree shaking is a form of dead-code elimination that removes unused exports from your code. When running in production mode, Webpack analyzes module exports to exclude unnecessary code, resulting in smaller bundle sizes.

What is Code Splitting and why is it beneficial?

Code splitting is a technique that breaks your bundle into smaller chunks that can be loaded on demand. This improves the initial load time of your application. It can be achieved in Webpack by:

Entry Points: Specifying multiple configuration entries. One entry point is equivalent to one bundle.
Dynamic Imports: Using the import() syntax to load modules asynchronously.
SplitChunks Plugin: Automatically splitting vendor code and common dependencies.

5. Development Tools & Modes

What is the role of the Webpack Dev Server?

The Webpack Dev Server is a tool that provides a local server for your application. It is used to:

Serve your application to the browser.
Enable hot module replacement (meaning that when you make a change to your code, the browser will automatically reload the page, similar to a live reload, but more efficiently).
Handle error reporting.

What are Source Maps and how are they used in Webpack?

Source maps are files that map the transformed bundled code back to the original source code. They are critical for debugging, as they let you see the original code in the browser's developer tools.

To enable source maps, you need to add the devtool property to your Webpack configuration.

Example Configuration:

// webpack.config.js
module.exports = {
    // ...other configuration...
    devtool: 'source-map',
};

Example Source Map File Content:

{
  "version": 3,
  "file": "bundle.js",
  "sources": [
    "webpack:///./src/index.js"
  ],
  "sourcesContent": [
    "function greet() {\n  console.log('Hello, world!');\n}\n\ngreet();"
  ],
  "names": [
    "greet",
    "console",
    "log"
  ],
  "mappings": "AAAA,SAASA,KAAT,EAAgB;AACfC,IAAAA,OAAO,CAACC,GAAR,CAAY,aAAZ;AACA;;AAEDF,KAAK"
}

What is the difference between development and production mode in Webpack?

Development Mode: Offers features like detailed error messages, source maps, and improved build speed. It doesn’t perform aggressive optimizations, making debugging easier.
Production Mode: Enables optimizations such as minification, tree shaking, and other performance improvements to create optimized bundles for deployable code.

6. Bundle Analysis & Caching Strategies

How can you analyze the bundle size?

Tools such as webpack-bundle-analyzer can visualize the size of the output files, helping you identify large dependencies or poorly optimized code. You can run:

npm install --save-dev webpack-bundle-analyzer

webpack --profile --json > stats.json

Then use a visualizer to get insights about bundle performance.

How does Webpack make sure the client gets the latest version of the bundle?

Webpack uses a content hash to generate a unique identifier for each bundle. This hash is included in the filename of the bundle. When the bundle is updated, the hash changes, ensuring that the browser downloads the new version.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack ContentHash Example</title>
</head>
<body>
  <!-- The script tag is updated to include the latest content-hashed bundle -->
  <script src="app.f6g7h8i9j0.js"></script>
</body>
</html>

7. Build Performance Optimization Strategies

What are some strategies to optimize Webpack build performance?

Use the cache option to cache the results of the build.
Use the parallel option to build multiple bundles in parallel.
Use loaders and plugins that are optimized for performance.
Use the splitChunks plugin to split the bundle into smaller chunks.
Use the UglifyJsPlugin to minify the bundle.
Use the ExtractTextPlugin to extract CSS into a separate file — the smaller the file, the better the reduction in initial load time.
Use the ProvidePlugin to automatically load modules instead of having to import them everywhere.

8. Environment Variables & TypeScript Integration

What are Environment Variables and how can they be integrated in Webpack?

Webpack allows you to define environment variables through the DefinePlugin. This lets you specify variables for different build environments (development, testing, production) during compile time.

Example:

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
      'process.env.API_URL': JSON.stringify('https://api.example.com'),
    })
  ]
};

How do you use Webpack with TypeScript?

To use Webpack with TypeScript, you need to install the following packages:

TypeScript: The TypeScript compiler.
ts-loader: A Webpack loader to handle TypeScript files.
Webpack & Webpack CLI: The core bundler and its command line interface.

9. Troubleshooting & Common Pitfalls

What are some common pitfalls when configuring Webpack?

Overcomplicating the configuration with too many plugins.
Not optimizing the production build (e.g., missing tree shaking or minification).
Incorrect loader configurations that lead to misprocessing files.
Failing to properly handle caching, which can lead to duplicate code or outdated assets.

How do you debug problems in the Webpack build process?

Use the stats option to show detailed information about the build.
Use the progress option to display a progress bar during the build.
Use the errors-only option to display only errors during the build.

Breakdown useEffect in React: Why do many people hate useEffect

TOOSRIET — Sun, 02 Feb 2025 15:38:11 +0000

Why useEffect ?

It's clear that useEffect is one of the most commonly used hooks in React. If you go through 10 React course, all of them will likely mention to useEffect. React itself also emphasizes the important of useEffect - its official documentation includes five dedicated sections just discussing about how to handle side effect in React. Despite its popularity, useEffect seem like not friendly with React community. In fact, there’s been a growing discussion among experts who are trying to convince others to "Say Goodbye to useEffect." So, what’s going on with useEffect? Let’s break it down together.

Is useEffect unintuitive ?

When discussing why a function might feel unintuitive, we might think that its document isn't clear enough in explaining its purpose. However, it’s not a case for useEffect. Let’s have a look in React document about the definition of useEffect

useEffect is a React Hook that lets you synchronize a component with an external system.

What's the heck is external system ?
If you scroll down a bit then you will find the definition for this term

Some components need to stay connected to the network, some browser API, or a third-party library, while they are displayed on the page. These systems aren’t controlled by React, so they are called _external.

So by theory, in React useEffect is created when you want to synchronize internal state (state is created by our code - useState, useContext) with external state (local storage, network, etc..).

However, in reality, useEffect is considered as a powerful tools for hooking into the initialization of component, or watching changes not only in internal data but also in external data.

Let’s take a look on this example. Let's say we want to create a custom hook usePrevious to get the previous data when state change to new value.

With FE mindset, it’s very intuitive to come up with a solution listening on the changes of state by using useEffect, much like the approach taken by libraries such as react-use.

export default function usePrevious<T>(state: T): T | undefined {
  const ref = useRef<T>();

  useEffect(() => {
    ref.current = state;
  });

  return ref.current;
}

It’s make sense but it’s the thing React doesn’t want us to do. By definition, we should only useEffect when we need to sync with external state, however, in this scenario no external involved.

Instead, we need to solve the problem as same as the approach of useHook library

export function usePrevious(value) {
  const [current, setCurrent] = React.useState(value);
  const [previous, setPrevious] = React.useState(null);

  if (value !== current) {
    setPrevious(current);
    setCurrent(value);
  }

  return previous;
}

In this code, we call two setState functions. However, React is very efficient at batching state updates—it will calculate the changes and renders only once.

Because useEffect is very power, easily to overuse in wrong way and addicted that make some developer in React community don't like it. Beside, if you overuse useEffect in a wrong way you may encounters some problems

What if we continue useEffect in a wrong way ?

useEffect is clearly a good tool for handling side effect, however, if we don't use it properly we may encounter some issues

Your app may got performance issue

Keep using useEffect as a tracking tool for all purpose may let your brain lazy in coming up better solution to solve the need.

Let’s have a look on this example
You're received a task building the search filter. If you overuse useEffect, you may come up with the solution like this

  const [searchTerm, setSearchTerm] = React.useState("");
  const [filteredItems, setFilteredItems] = React.useState(items);

  useEffect(()=>{
      setFilteredItems(
          MOCK_DATA.filter((item) =>
              item.toLowerCase().includes(searchTerm)
        )
    )
  }, [searchTerm])

  const handleSearch = (e)=>{
    setSearchTerm(e.target.value)
  }

Unfortunately, it’s not a good approach as your application have to render twice when keyword changes

First render for setSearchTerm call in handleSearch function
After searchTerm is updated to expected value, useEffect will be called and invoke setFilteredItems and trigger second render

Instead, we can batch the state updates into one, as React is very efficient at rendering. Even if we call two setState functions simultaneously, they only trigger a single render with this approach.

  const [searchTerm, setSearchTerm] = React.useState("");
  const [filteredItems, setFilteredItems] = React.useState(items);

  const handleSearch = (e)=>{
    const newvalue = e.target.value

    setSearchTerm(newvalue)
    const result = items.filter((item) =>
      item.toLowerCase().includes(newvalue.toLowerCase())
    );
    setFilteredItems(result);
  }

Inconsistence in coding style

Imagine you’re working in a team where they're very good in React and you use useEffect like a tracking tools for all purpose. As a result, it will make your college are not happy and it’s might impact to your promotion

useEffect remains unintuitive

Yes, if we don't use useEffect correctly, you might encounter bugs due to its unintuitive behavior, as shown in the image below.

The reason for above bug come from overusing of useEffect then the author doesn't know when useEffect is invoked in React render lifecycle (TLDR: React will only render when state change → After render, React will start invoking useEffect function to handle side-effect)
If you understand React render lifecycle you may realize the pathname inside useEffect code will always be the latest value (not the previous one)

What is the good example for correct usage of `useEffect`

As we mention earlier useEffect is created for handling side-effect, so we expect code inside useEffect should be related to side-effect (updating DOM, managing localStorage, calling API, etc..)
In below example, we're trying to build a component that can help us update the tab title by clicking different button
We need useEffect in this scenario to help us synchronize the data between internal state (React state) and external state (window.document.title)

function DocumentTitleChanger() {
  const [title, setTitle] = useState('Default Title');

  useEffect(() => {
    // This will run every time "title" changes.
    document.title = title;
  }, [title]);

  return (
    <div>
      <h1>Change Document Title</h1>
      <button onClick={() => setTitle('Title One')}>Title One</button>
      <button onClick={() => setTitle('Title Two')}>Title Two</button>
      <button onClick={() => setTitle('Title Three')}>Title Three</button>
    </div>
  );
}

That it’s for this post. I hope this post can help you understand more about useEffect and help you use useEffect in a more correct ways. Mastering side-effect is not an easy task in React, please let's me know your attention by follow / react on this post. If you find it useful, I will work on writing more post in the future for mastering side-effect

DEV Community: TOOSRIET

The React Folder Structure Exposé: From Newbie to Code Mastery Style

1. Beginner Folder Structure

Example Structure

Pros ✅

Cons ❌

2. Intermediate Folder Structure

Example Structure

Pros ✅

Cons ❌

3. Advanced / Complex (Feature-Based) Folder Structure

Example Structure

Pros ✅

Cons ❌

How the Advanced Structure Solves Issues from Lower Levels

Conclusion

18+ Questions to Challenge and Expand Your Babel Knowledge

Table of Contents

0. Intro

1. Babel Fundamentals and Syntax Transformations

What is Babel and why we need it?

How does Babel work?

Describe how Babel transforms modern JavaScript syntax such as arrow functions, async/await, and generators under the hood.

2. Babel Configuration and Setup

How can Babel be configured in a project?

What is the difference between Babel “presets” and “plugins”?

How would you set up Babel for a React project and what additional presets or plugins might you use?

3. Compatibility and Debugging Tools

What is @babel/polyfill and why we need it?

What are source maps and why would you configure Babel to generate them?

4. Performance Optimizations and Plugin Management

How does Babel utilize caching to improve performance, especially during development?

How do you implement custom Babel plugins? Provide an outline of creating a plugin that logs every function entry.

Is Babel plugin order important?

Example Scenario

18+ Questions to Challenge and Expand Your Webpack Knowledge

Table of Contents

0. Intro

1. Introduction & Basic Concepts

What is Webpack?

What is the most common webpack version?

What is a bundle?

Why do we need bundles?

2. How Webpack Works & How to Configure It

How does Webpack work?

How do we configure Webpack?

3. Loaders & Plugins

What is the role of Loaders in Webpack?

What are Plugins in Webpack and how do they extend its functionality?

4. Code Optimization Techniques

What is Tree Shaking in Webpack?

What is Code Splitting and why is it beneficial?

5. Development Tools & Modes

What is the role of the Webpack Dev Server?

What are Source Maps and how are they used in Webpack?

What is the difference between development and production mode in Webpack?

6. Bundle Analysis & Caching Strategies

How can you analyze the bundle size?

How does Webpack make sure the client gets the latest version of the bundle?

7. Build Performance Optimization Strategies

What are some strategies to optimize Webpack build performance?

8. Environment Variables & TypeScript Integration

What are Environment Variables and how can they be integrated in Webpack?

How do you use Webpack with TypeScript?

9. Troubleshooting & Common Pitfalls

What are some common pitfalls when configuring Webpack?

How do you debug problems in the Webpack build process?

Breakdown useEffect in React: Why do many people hate useEffect

Why useEffect ?

Is useEffect unintuitive ?

What if we continue useEffect in a wrong way ?

Your app may got performance issue

Inconsistence in coding style

useEffect remains unintuitive

What is the good example for correct usage of useEffect

What is the good example for correct usage of `useEffect`