The javascript lifecycle: what it is and why it matters

If you’re building apps with JavaScript — especially in the browser or with frameworks like React — understanding the lifecycle of your code is key.

But what exactly does "lifecycle" mean? When does your code run? What happens before, during, and after a user interacts with your app?

In this post, we’ll explore the JavaScript lifecycle, from basic script execution to more advanced ideas like the event loop, DOM loading, and even React component lifecycles.

🧠 What do we mean by “lifecycle”?

In programming, a lifecycle is the series of steps or stages something goes through — from creation to destruction.

In JavaScript, lifecycle usually refers to:

• 🧱 The life of your code in the browser
• ⚙️ How JavaScript executes scripts step by step
• 🖼 The behavior of components (like in React) from mounting to unmounting

Let’s start from the beginning.

⏱ The lifecycle of a javascript program (in the browser)

When you load a webpage with JavaScript, the browser goes through a specific sequence:

1. Parse HTML

• The browser reads the HTML and builds the DOM.

1. Load & Execute JS

• When it hits a <script>, it loads and executes it immediately (unless defer or async is used).

1. DOM Ready / DOMContentLoaded

• Once HTML is fully parsed, the DOMContentLoaded event fires.

1. Window Load

• When everything is loaded (HTML, CSS, images, scripts), the load event fires.

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM is fully loaded');
});

window.addEventListener('load', () => {
  console.log('Everything is loaded');
});

🔄 The javascript event loop lifecycle

This is where things get more advanced — and fun.

JavaScript is single-threaded, but it can handle asynchronous tasks like timers, fetch calls, etc.

How?

Thanks to the event loop:

console.log('1');

setTimeout(() => {
  console.log('2');
}, 0);

console.log('3');

This logs:

1
3
2

Even though the timeout is 0, it’s sent to the task queue and waits for the call stack to be empty. That’s the event loop in action.

So part of the lifecycle of your code is understanding what runs now, and what waits.

🧩 Lifecycle in react components (BONUS)

If you’re using React, the idea of a component lifecycle is even more explicit.

Every component goes through:

1. Mounting (created and added to the DOM)
2. Updating (props/state changes)
3. Unmounting (removed from the DOM)

Example:

useEffect(() => {
  console.log('Component mounted');

  return () => {
    console.log('Component will unmount');
  };
}, []);

That’s the lifecycle right there:

• The effect runs on mount
• The return runs on unmount
• If you add dependencies, it will also run on update

🧼 Why should you care?

Understanding the lifecycle helps you:

• ✅ Avoid bugs related to timing
• ✅ Clean up resources (event listeners, intervals, etc.)
• ✅ Know when your code actually runs
• ✅ Handle async tasks properly
• ✅ Write better, more predictable components

🔁 Lifecycle summary

📌 Conclusion

The lifecycle of JavaScript — whether in the browser or inside a component — is all about when and how your code runs.

Once you understand this flow, you’ll be able to:

• Write better user experiences
• Debug timing issues
• Manage resources effectively
• Master frameworks like React with confidence

Next time your code “doesn’t work,” ask yourself: Where in the lifecycle am I?