technology

🚀 Fixing Time Limit Exceeded in “Longest Consecutive Sequence” (LeetCode 128)

Pandiyan MuruganLeave a comment

Introduction

LeetCode’s Longest Consecutive Sequence problem challenges us to find the longest sequence of consecutive numbers in an unsorted array in O(n) time. My initial approach seemed correct but ran into Time Limit Exceeded (TLE) issues. After optimizing the code, I discovered that removing elements from the HashSet significantly improved performance. Let’s explore why!

My Initial (TLE) Solution

This solution checks each number and expands the sequence while map.Contains(num + length) remains true.

public class Solution {
    public int LongestConsecutive(int[] nums) {
        HashSet<int> map = new HashSet<int>(nums);
        int result = 0;

        foreach (int num in nums) {
            if (!map.Contains(num - 1)) { // Start of sequence
                int length = 0;
                while (map.Contains(num + length)) { 
                    length++;
                }
                result = Math.Max(result, length);
            }
        }
        return result;
    }
}

Why Does This Cause TLE?

🔴 Repeated Lookups: The while loop checks the same numbers multiple times.
🔴 Inefficient for Large Inputs: If the array is large, map.Contains(num + length) is called unnecessarily.

Optimized Solution (With set.Remove(currentNum))

Instead of checking the same numbers again, we remove elements from the set once we process them.

public class Solution {
    public int LongestConsecutive(int[] nums) {
        if (nums.Length == 0) return 0; // Handle empty array

        HashSet<int> set = new HashSet<int>(nums);
        int maxLength = 0;

        foreach (int num in nums) {
            if (!set.Contains(num - 1)) { // Start of sequence
                int currentNum = num;
                int length = 1;

                while (set.Contains(currentNum + 1)) {
                    currentNum++;
                    length++;
                    set.Remove(currentNum); // Remove to avoid rechecking
                }

                maxLength = Math.Max(maxLength, length);
            }
        }
        return maxLength;
    }
}

Why Does set.Remove(currentNum) Improve Performance?

✅ Each number is processed only once
✅ Avoids redundant Contains() lookups
✅ Reduces unnecessary iterations, ensuring O(n) complexity

By removing currentNum from set, we make sure that we never check the same number twice, significantly improving efficiency.

Time Complexity Analysis

  • Initial approach: Worst-case O(n²) due to redundant lookups. ❌
  • Optimized approach: O(n) since each number is visited only once. ✅

Final Thoughts

This simple fix—removing elements as they are processed—helps avoid unnecessary checks and reduces execution time drastically. If you’re facing TLE on LeetCode 128, adding set.Remove(currentNum) is the key! 🚀

What do you think? Have you faced similar performance issues? Let me know in the comments! 😊

Disclaimer: Code is fully written by me in this blog, but the text explaining the problem is generated with help of AI.

Why Use Context in a Next.js App?

Pandiyan MuruganLeave a comment

Next.js, with its rich feature set and server-side rendering capabilities, is the darling of modern web development. But as your Next.js app grows, managing state across components can become tricky. This is where the Context API steps in as your superhero. Let’s explore why using Context in a Next.js app is a smart choice and how it can make your developer life easier—and your app better!

1. The Problem: Prop Drilling Galore

Imagine you’re building a dashboard app. You need user data to show the user’s name in the header, their preferences in a settings panel, and their activity log on a sidebar. Without Context, you’ll find yourself passing this data through multiple layers of components, even if some intermediate components don’t care about it.

This practice, known as prop drilling, quickly turns your clean code into a tangled mess. The more deeply nested your components are, the messier it gets. That’s where the Context API comes to the rescue.

2. The Solution: Centralized State Management with Context

The Context API lets you create a global state that any component in your app can access, no matter how deeply nested. Instead of juggling props like a circus performer, you create a UserContext (or any context you need), wrap your app with a provider, and make the data available anywhere with a simple hook like useContext.

Here’s a quick example:

import { createContext, useContext, useState } from 'react';

// Create Context
const UserContext = createContext();

// Provider Component
export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

// Custom Hook
export function useUser() {
  return useContext(UserContext);
}

// In _app.js
import { UserProvider } from '../contexts/UserContext';

export default function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

Now, any component can access the user state without worrying about prop drilling. Clean and efficient!

3. Server-Side Rendering (SSR) Made Easy

Next.js shines with SSR and static site generation (SSG). With Context, you can seamlessly manage and share server-fetched data across your app. For instance, you can populate your context with user session data fetched via getServerSideProps or getInitialProps.

export async function getServerSideProps(context) {
  const user = await fetchUserFromSession(context.req);
  return {
    props: {
      initialUser: user,
    },
  };
}

function MyPage({ initialUser }) {
  const { setUser } = useUser();

  useEffect(() => {
    setUser(initialUser);
  }, [initialUser]);

  return <Dashboard />;
}

This pattern ensures data consistency and avoids the need for redundant API calls.

4. Perfect for Theming

Want to toggle between light and dark modes in your app? The Context API makes it ridiculously easy. Create a ThemeContext, store your current theme, and let your components consume it. Bonus: Combine it with Tailwind CSS for a dynamic theme switcher.

5. When NOT to Use Context

While Context is powerful, it’s not a silver bullet. For apps with very complex state management needs (like intricate forms or deeply interconnected states), consider state management libraries like Redux or Zustand. Context works best for lightweight, app-wide states.

In Conclusion

Using Context in your Next.js app isn’t just about avoiding prop drilling. It’s about writing cleaner, more maintainable code. It’s about making SSR a breeze. It’s about enabling features like theming without breaking a sweat. In short, it’s about building a better developer experience and a better app. So, next time you’re tempted to pass props through a dozen components, give Context a try—your future self will thank you!

Happy Coding!