DEV Community: Omkar Karale

I built a production-ready MERN boilerplates so you never have to again.

Omkar Karale — Thu, 06 Aug 2026 13:15:49 +0000

Every MERN project starts the same way.

You open a blank Express file. You think "auth can't be that hard." Three days later you're debugging why your refresh token works in Postman but not in the browser, your CSRF middleware is blocking your own requests, and Google OAuth is throwing a redirect URI mismatch at 1 AM.

I've been there. So I built the thing I wished existed.

Introducing MERN Auth Starter — ship auth in 10 minutes, not 5 days

Live demo → secure-authforge

Clone it. Configure three env variables. Run npm install && npm run dev. You have a full production-grade auth system running locally before your coffee gets cold.

What's actually inside

I'm not talking about a tutorial project with jwt.sign() shoved into a route handler. This is the real thing.

Security layer

JWT access tokens (15 min expiry) stored in httpOnly cookies — not localStorage, never exposed to JavaScript
Refresh token rotation with reuse detection — if a stolen token is used, the entire session is wiped immediately
bcrypt password hashing at 12 rounds
Google OAuth with CSRF state verification
CSRF protection — double-submit cookie pattern on every state-changing route
Rate limiting on every auth endpoint — login, register, forgot-password, verify-email
Helmet security headers + CORS restricted to your frontend URL
Email enumeration protection — login and forgot-password never reveal whether an account exists

Backend

Built with Node.js + Express 5 + TypeScript + MongoDB + Mongoose

Email verification flow — Resend in production, auto-falls back to demo mode with zero setup needed
Forgot password → reset password → email notification
Change password for authenticated users
Role-based access control — requireRole("admin") middleware, drop it on any route
Middleware stack: verifyToken, requireVerifiedEmail, requireRole
Zod validation on every endpoint
Audit logging on every auth event

Frontend

Built with React 19 + Vite + Tailwind CSS v4 + TypeScript

Zustand auth store — no prop drilling, no Context API spaghetti
TanStack Query for server state
React Hook Form + Zod — validation that matches the backend exactly
Axios interceptors — silent token refresh on 401, zero flicker, user never gets logged out unexpectedly
Full page set: Login, Register, Verify Email, Forgot Password, Reset Password, Change Password

Production-ready out of the box

10 integration tests using Node's built-in test runner — zero extra dependencies
vercel.json already configured for SPA routing
Deploys to Render + Vercel in under 10 minutes
Full setup guide included

The demo mode is my favourite part

No Resend account? No problem.

When RESEND_API_KEY is missing, the backend automatically switches to demo mode:

Verification links appear directly on screen as a clickable button
Password reset links open automatically in the browser
The full auth flow works end to end — register, verify, login, reset password — with zero external services

This means a buyer can clone it and have the entire flow running in minutes without signing up for anything. When they're ready for production, they add their Resend key and it just works.

Who this is for

Developers starting a new MERN project who want auth done today, not next week.

Freelancers who configure this for clients and bill $500–$800 per project. At that rate, this pays for itself on the first use.

Students who want a portfolio project backed by the same security patterns used in production apps.

Anyone who has debugged JWT expiry at 2 AM and never wants to do it again.

Tech stack at a glance

Layer	Technology
Backend	Node.js, Express 5, TypeScript
Database	MongoDB + Mongoose
Auth	JWT, bcrypt, httpOnly cookies
Email	Resend (with demo mode fallback)
Validation	Zod — shared frontend + backend
Frontend	React 19, Vite, Tailwind CSS v4
State	Zustand
Forms	React Hook Form + Zod Resolver
Testing	Node built-in test runner

What it looks like

Live demo → secure-authforge

Try the full flow:

Register with email
Verify email via the demo link (no inbox needed)
Login
Try Google OAuth
Test forgot password flow

Everything works. No fake buttons.

Get it

→ Get MERN Auth Starter Pack

$79 — personal and commercial use included. Use it in unlimited client projects.
Resale of the source code is not permitted.

One last thing

I built this because I was tired of copy-pasting auth code between projects and fixing the same bugs every time. If that sounds familiar — this is for you.

Questions? Drop them in the comments or drop me an email. I read every message and typically reply within 24 hours.

Built by @ItsOnkar-dev

Mastering React Performance: A Developer's Guide to Preventing Unnecessary Re-renders

Omkar Karale — Tue, 31 Dec 2024 13:17:22 +0000

React's virtual DOM and component-based architecture make it incredibly efficient, but without proper optimization, your application can still suffer from performance issues. Let's dive into proven strategies to eliminate unnecessary re-renders and boost your React app's performance.

Understanding Re-renders: The Foundation

Before we optimize, we need to understand when and why React components re-render:

When a component's state changes
When its props change
When its parent component re-renders

Not all re-renders are bad, but unnecessary ones can impact performance.
While these scenarios might seem overlapping, they each represent distinct cases that require different optimization approaches.
Let's explore how to prevent them.

1. React.memo: Your First Line of Defense

const MovieCard = React.memo(({ title, rating, onLike }) => {
  console.log(`MovieCard rendered: ${title}`);
  return (
    <div className="card">
      <h3>{title}</h3>
      <span>Rating: {rating}/10</span>
      <button onClick={onLike}>Like</button>
    </div>
  );
});

// Usage
<MovieCard 
  title="Inception" 
  rating={9.3} 
  onLike={() => handleLike('inception')} 
/>

💡 Pro Tip: While React.memo is powerful, use it strategically. Memoizing everything can actually hurt performance.

2. useCallback: Stabilizing Function References

const MovieList = () => {
  const [movies, setMovies] = useState([]);

  const handleLike = useCallback((movieId) => {
    setMovies(prevMovies => 
      prevMovies.map(movie => 
        movie.id === movieId 
          ? { ...movie, likes: movie.likes + 1 }
          : movie
      )
    );
  }, []); // Empty deps array as it only uses setState

  return movies.map(movie => (
    <MovieCard
      key={movie.id}
      {...movie}
      onLike={() => handleLike(movie.id)}
    />
  ));
};

3. useMemo: Caching Complex Calculations

const MovieAnalytics = ({ movies }) => {
  const statistics = useMemo(() => ({
    averageRating: movies.reduce((acc, m) => acc + m.rating, 0) / movies.length,
    topRated: [...movies].sort((a, b) => b.rating - a.rating)[0],
    totalLikes: movies.reduce((acc, m) => acc + m.likes, 0)
  }), [movies]);

  return (
    <div>
      <h2>Analytics Dashboard</h2>
      <p>Average Rating: {statistics.averageRating.toFixed(1)}</p>
      <p>Most Popular: {statistics.topRated.title}</p>
      <p>Total Likes: {statistics.totalLikes}</p>
    </div>
  );
};

4. State Management Best Practices

Lifting State Up (When Needed)

const MovieApp = () => {
  const [favorites, setFavorites] = useState(new Set());

  // Lifted state handler
  const toggleFavorite = useCallback((movieId) => {
    setFavorites(prev => {
      const next = new Set(prev);
      if (next.has(movieId)) next.delete(movieId);
      else next.add(movieId);
      return next;
    });
  }, []);

  return (
    <div>
      <MovieList onFavorite={toggleFavorite} />
      <FavoritesList ids={favorites} />
    </div>
  );
};

5. Advanced Optimization Techniques

Custom Hooks for Complex Logic

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

  useEffect(() => {
    let mounted = true;

    async function fetchMovie() {
      setLoading(true);
      try {
        const response = await fetch(`/api/movies/${movieId}`);
        const movie = await response.json();
        if (mounted) {
          setData(movie);
          setLoading(false);
        }
      } catch (error) {
        if (mounted) {
          console.error('Failed to fetch movie:', error);
          setLoading(false);
        }
      }
    }

    fetchMovie();
    return () => {
      mounted = false;
    };
  }, [movieId]);

  return { data, loading };
}

6. Profiling and Debugging

Using React Developer Tools

Enable React Developer Tools Profiler
Record component renders
Identify unnecessary re-renders
Measure render durations

Performance Checklist

✅ Use React.memo for pure functional components
✅ Implement useCallback for event handlers passed as props
✅ Apply useMemo for expensive calculations
✅ Avoid inline object creation in renders
✅ Utilize proper key props in lists
✅ Profile your app regularly

Common Pitfalls to Avoid

❌ Over-optimization
❌ Premature optimization
❌ Memoizing everything
❌ Creating new objects/arrays in render
❌ Deep component nesting

Looking Ahead: React 19 and Performance

React 19 brings automatic performance improvements:

Enhanced automatic batching
Improved concurrent rendering
Better scheduling of state updates

Conclusion

Performance optimization in React is a balance between code complexity and actual performance gains. Start with the basics, measure your app's performance, and optimize where needed. Remember: premature optimization is the root of all evil!

✨ I hope you found this helpful! Don’t forget to like and follow me for more React tips and tricks!

🚀 Follow me on X (Twitter) and LinkedIn for daily web development tips and insights!

💻 Keep coding, keep creating, and keep improving!

Wishing you all success and positivity on this wonderful day. Let’s make it amazing together! 🌟

react #javascript #webdev #performance

🎨 DaisyUI: The Game-Changer for Your Tailwind CSS Workflow

Omkar Karale — Sat, 28 Dec 2024 13:57:59 +0000

Ever found yourself drowning in a sea of Tailwind utility classes? You know, writing something like this for the hundredth time:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out">
  Click me!
</button>

What if I told you there's a better way? Enter DaisyUI – your new best friend in the world of Tailwind CSS development! 🚀

What's DaisyUI, and Why Should You Care?

DaisyUI is like having a master craftsman's toolbox for Tailwind CSS. It's a free, open-source component library that turns complex utility combinations into simple, semantic classes. The best part? It's purely CSS-based – no JavaScript baggage included!

Instead of the verbose button above, you could simply write:

<button class="btn btn-primary">Click me!</button>

Clean, right? 😎

✨ Why DaisyUI is Making Waves

1. Rich Component Library

40+ pre-built components
From simple buttons to complex carousels
All the essential UI building blocks you need

2. Theme System That Actually Makes Sense

Remember the days of writing separate dark mode classes? With DaisyUI, switching themes is as simple as:

<div data-theme="dark">
  <!-- Your content magically transforms! -->
</div>

The theming system in daisyUI is amazing! With 30+ built-in color themes, you can switch the entire look of your application by changing a single attribute. This is particularly valuable for agencies building multiple client websites or developers creating white-label products. Need a dark mode? It's just one attribute away.

module.exports = {
  daisyui: {
    themes: [
      {
        mytheme: {
          "primary": "#ff7ac6",
          "secondary": "#7b92b2",
          "accent": "#67cba0",
          "neutral": "#181a2a",
          "base-100": "#ffffff",
        },
      },
      "dark",
      "cupcake",
    ],
  },
}

3. Framework Agnostic = Maximum Freedom

Whether you're team React, Vue, Svelte, or good old HTML, DaisyUI's got your back. No framework lock-in, no complications!

🚀 Getting Started in 2 Minutes

Install the package:

npm i -D daisyui@latest

Add it to your tailwind.config.js:

module.exports = {
  plugins: [require('daisyui')],
}

That's it! You're ready to rock! 🎸

🤔 When Should You Use DaisyUI?

Perfect For:

Rapid prototyping and MVPs
Small to medium-sized projects
Design system foundations
Performance-conscious applications
Cross-framework development

Maybe Look Elsewhere When:

You need complex enterprise features
Your design requirements are highly specific
You need heavy JavaScript integration
You require specialized backend-integrated components

💪 DaisyUI vs The Competition

Let's break it down:

DaisyUI vs Material UI:

DaisyUI:

CSS-only components
Framework agnostic
Tiny bundle size
More flexible styling
Simpler setup

Material UI:

Full-featured React components
Follows Material Design principles
Larger bundle size
More opinionated design
Requires more setup and configuration

DaisyUI vs Ant Design:

DaisyUI:

Lightweight alternative
Focus on simplicity
No JavaScript required
Quick to implement
Easier to customize

Ant Design:

Complete design system
Rich feature set
Heavy JavaScript dependencies
Enterprise-focused
Steeper learning curve

🎯 Pro Tips for DaisyUI Masters

Combine with Tailwind: DaisyUI plays nicely with Tailwind utilities:

<button class="btn btn-primary hover:scale-105">
  Fancy Button
</button>

Theme Switching: Add theme toggles easily:

<select data-choose-theme>
  <option value="light">Light</option>
  <option value="dark">Dark</option>
  <option value="cupcake">Cupcake</option>
</select>

Custom Modifications: Extend components with your styles:

.btn-custom {
  @apply btn btn-primary;
  text-transform: uppercase;
}

🎉 Conclusion

DaisyUI is like having a UI superpower in your development toolkit. It takes the best parts of Tailwind CSS and makes them even better with semantic components and an amazing theming system.

Ready to supercharge your Tailwind workflow? Give DaisyUI a shot – your future self will thank you!

🔗 Useful Links

Have you tried DaisyUI? What's your favorite component library for Tailwind CSS? Let me know in the comments below! 👇

✨ I hope you found this helpful! Don’t forget to like and follow me for more React tips and tricks!

🚀 Follow me on X (Twitter) and LinkedIn for daily web development tips and insights!

💻 Keep coding, keep creating, and keep improving!

Wishing you all success and positivity on this wonderful day. Let’s make it amazing together! 🌟

14 Must-Have React Libraries Every Beginner Developer Should Know in 2025: 🚀

Omkar Karale — Fri, 27 Dec 2024 07:20:25 +0000

As a React developer, choosing the right tools can significantly boost your productivity. Here's my curated list of essential React libraries that will supercharge your development workflow in 2025!💻

1. React Router:

The standard for handling navigation in React apps. It allows you to handle navigation between different components and pages seamlessly.
🔗reactrouter.com

Example:

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

2. React Hook Form:

Perfect for performance-focused forms: This library makes handling forms in React a breeze! 🎉 With its simple API, you can easily manage form state and validations using React hooks. Plus, it’s super lightweight and speeds things up by minimizing unnecessary re-renders. 🚀
🔗react-hook-form.com

Example:

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

function SignupForm() {
  const { register, handleSubmit } = useForm();

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <input {...register("email")} required />
      <button type="submit">Submit</button>
    </form>
  );
}

3. Formik:

Great for complex form logic: This library streamlines form handling by managing state, validation, and submission effortlessly. 📝✨ It cuts down on boilerplate code, saving you time, and ensures a smooth developer experience when building forms. 🚀
🔗formik.org

Example:

import { Formik, Form, Field } from 'formik';

function LoginForm() {
  return (
    <Formik 
      initialValues={{ email: '' }}
      onSubmit={values => console.log(values)}
    >
      <Form>
        <Field name="email" type="email" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

4. Styled Components:

Write CSS in JS with dynamic props: Styled Components lets you style your components with real CSS, right inside your JavaScript! 🎨💻 It keeps your styles scoped to the specific component, preventing conflicts. Plus, you can create dynamic styles based on props, making your code more flexible and reusable. 🌟
🔗styled-components.com

Example:

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
  padding: 10px 20px;
`;

5. Material UI:

Google's Material Design in React: MUI provides a powerful library of pre-built, customizable components that align perfectly with Google’s Material Design guidelines. 🌟 It’s your go-to solution for building stunning, user-friendly interfaces in no time. 🚀
🔗mui.com/

Example:

import { Button, TextField } from '@mui/material';

function LoginForm() {
  return (
    <form>
      <TextField label="Email" variant="outlined" />
      <Button variant="contained">Submit</Button>
    </form>
  );
}

6. Chakra UI:

Modern, accessible components: Chakra UI is a modern, versatile component library that makes building UIs effortless! 🎨✨ It offers simple, accessible, and highly customizable components, so you can create stunning designs with ease.
🔗chakra-ui.com/

Example:

import { Button, Input } from '@chakra-ui/react';

function SearchBar() {
  return (
    <div>
      <Input placeholder="Search..." />
      <Button colorScheme="blue">Search</Button>
    </div>
  );
}

7. React Bootstrap:

Bootstrap components for React: Get fully responsive, pre-built Bootstrap components tailored for React projects. 🚀 Seamless integration for faster development!
🔗react-bootstrap.github.io/

Example:

import { Button, Form } from 'react-bootstrap';

function BootstrapForm() {
  return (
    <Form>
      <Form.Group>
        <Form.Label>Email</Form.Label>
        <Form.Control type="email" placeholder="Enter email" />
      </Form.Group>
      <Button variant="primary">Submit</Button>
    </Form>
  );
}

8. Framer Motion:

Powerful animations made simple: Framer Motion is a powerful animation library that makes it simple to add smooth, interactive animations to your React components. 🎥✨ With its intuitive API, you can create stunning motion effects effortlessly, bringing your UI to life! 🚀
🔗motion.dev/

Example:

import { motion } from 'framer-motion';

const AnimatedCard = () => (
  <motion.div
    whileHover={{ scale: 1.1 }}
    whileTap={{ scale: 0.9 }}
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
  >
    Hover me!
  </motion.div>
);

9. React i18next:

Multi-language support: Simplify multi-language support in your apps. 🌍 Features include lazy loading, pluralization, and advanced formatting for smooth localization.
🔗react.i18next.com/

Example:

import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t } = useTranslation();
  return <h1>{t('welcome.message')}</h1>;
}

10. Recharts:

Beautiful, responsive charts: Create stunning data visualizations with customizable APIs. 📊 Whether it’s bar, line, or pie charts, Recharts has you covered.
🔗recharts.org/

Example:

import { LineChart, Line, XAxis, YAxis } from 'recharts';

const data = [
  { month: 'Jan', sales: 400 },
  { month: 'Feb', sales: 300 },
  { month: 'Mar', sales: 600 }
];

function SalesChart() {
  return (
    <LineChart width={500} height={300} data={data}>
      <XAxis dataKey="month" />
      <YAxis />
      <Line type="monotone" dataKey="sales" stroke="#8884d8" />
    </LineChart>
  );
}

11. React Virtualized:

Efficient rendering for large lists: Efficiently render massive lists and tables by showing only what’s visible in the viewport. 🚀 Boosts performance for large datasets.
🔗github.com/bvaughn/react-virtualized

Example:

import { List } from 'react-virtualized';

function VirtualList({ items }) {
  return (
    <List
      width={300}
      height={500}
      rowCount={items.length}
      rowHeight={50}
      rowRenderer={({ index, key, style }) => (
        <div key={key} style={style}>
          {items[index]}
        </div>
      )}
    />
  );
}

12. React Helmet:

Manage document head dynamically: Dynamically manage your app’s metadata (titles, descriptions, etc.). Ideal for boosting SEO and optimizing social media previews. 🛠️
🔗github.com/nfl/react-helmet

Example:

import { Helmet } from 'react-helmet';

function SEOComponent() {
  return (
    <Helmet>
      <title>My Amazing App</title>
      <meta name="description" content="Welcome to my app" />
      <meta property="og:title" content="My Amazing App" />
    </Helmet>
  );
}

13. React Spinners:

Beautiful loading indicators: Easily add customizable loading spinners to enhance user experience during load times. ⏳ Perfect for keeping users engaged!
🔗react-spinners/

Example:

import { ClipLoader } from "react-spinners";

function LoadingState() {
  return (
    <div className="loading">
      <ClipLoader color="#36D7B7" loading={true} size={50} />
    </div>
  );
}

14. React DnD:

Flexible drag and drop: Add drag-and-drop functionality to your components with ease. 🖱️ Perfect for building interactive and dynamic UIs.
🔗github.io/react-dnd/about

Example:

import { useDrag, useDrop } from 'react-dnd';

function DraggableItem() {
  const [{ isDragging }, drag] = useDrag({
    type: 'ITEM',
    collect: monitor => ({
      isDragging: !!monitor.isDragging(),
    }),
  });

  return <div ref={drag}>Drag me!</div>;
}

Quick Tips for Using These Libraries 💡

🎯 Start with essential libraries (routing, forms, UI components)
📦 Check bundle sizes - use bundlephobia.com
🔄 Keep dependencies updated for security
📚 Read documentation thoroughly
⚡ Use tree-shaking when possible
🧪 Test thoroughly after updates

When to Use What? 🤔

Forms: React Hook Form for simple forms, Formik for complex ones
Styling: Styled Components for custom designs, MUI/Chakra for quick development
Charts: Recharts for simple charts, D3.js for complex visualizations
Animation: Framer Motion for most cases, React Spring for physics-based animations

Conclusion: 🎉

These libraries have proven their worth in countless projects. Start with what you need most, and gradually expand your toolkit as your project grows.

Remember: the best library is the one that solves your specific problems while maintaining good performance and developer experience.

✨ I hope you found this helpful!

❤️ Don’t forget to like and follow me for more React tips and tricks!

🚀 Follow me on X (Twitter) and LinkedIn for daily web development tips and insights!

💻 Keep coding, keep creating, and keep improving!

Wishing you all success and positivity on this wonderful day. Let’s make it amazing together! 🌟

What's your favorite React library? Let me know in the comments! 💬

React Context and Hooks: The Modern Approach to State Management 🚀

Omkar Karale — Thu, 26 Dec 2024 16:58:03 +0000

Gone are the days of "prop drilling" and complex state management boilerplate. React's Context API, combined with Hooks, has revolutionized how we handle state management in modern React applications. In this deep dive, we'll explore how these powerful features work together to create cleaner, more maintainable code.

The Problem: Props Drilling

Picture this: You're building a theme switcher for your application. The theme needs to be accessible by components deep within your component tree. Traditionally, you'd pass this theme prop through multiple intermediate components that don't even use it - a practice known as "prop drilling."

const App = () => {
  const [theme, setTheme] = useState('light');
  return (
    <Header theme={theme}>
      <Navigation theme={theme}>
        <UserProfile theme={theme} />
      </Navigation>
    </Header>
  );
};

This approach quickly becomes unmaintainable as your application grows. Enter Context and Hooks.

The Solution: Context + Hooks

1. Creating a Context

First, let's create a theme context:

const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {},
});

2. The Provider Pattern

Next, we'll create a provider component that will wrap our application:

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = useCallback(() => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  }, []);

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

3. Custom Hook for Better Developer Experience

Let's create a custom hook to consume our context:

const useTheme = () => {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

4. Putting It All Together

Now, any component in our tree can access the theme state without prop drilling:

const ThemedButton = () => {
  const { theme, toggleTheme } = useTheme();
  return (
    <button 
      onClick={toggleTheme}
      style={{ 
        background: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#333' : '#fff'
      }}
    >
      Toggle Theme
    </button>
  );
};

Best Practices and Tips

1. Context Composition

Don't put everything in one context. Instead, compose multiple contexts for different concerns:

const AppProviders = ({ children }) => (
  <AuthProvider>
    <ThemeProvider>
      <UserPreferencesProvider>
        {children}
      </UserPreferencesProvider>
    </ThemeProvider>
  </AuthProvider>
);

2. Performance Optimization

Context triggers a re-render for all consuming components when its value changes. To optimize performance:

Split your context into smaller, more focused contexts
Use useMemo for complex context values
Implement React.memo for components that don't need all context updates

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const value = useMemo(() => ({
    theme,
    toggleTheme: () => setTheme(t => t === 'light' ? 'dark' : 'light'),
  }), [theme]);

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
};

3. TypeScript Integration

Adding TypeScript makes your context even more powerful:

interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

When to Use Context + Hooks

Context + Hooks is perfect for:

Theme management
User authentication state
Language preferences
Feature flags
Any global state that doesn't change frequently

However, for complex state management with frequent updates, you might still want to consider solutions like Redux or Zustand.

Real-World Example: Multi-theme Support

Let's implement a more advanced theme system:

const themes = {
  light: {
    primary: '#007AFF',
    background: '#FFFFFF',
    text: '#000000',
  },
  dark: {
    primary: '#0A84FF',
    background: '#000000',
    text: '#FFFFFF',
  },
  system: 'auto',
};

const ThemeContext = createContext({
  theme: themes.light,
  themeName: 'light',
  setThemeName: (name: 'light' | 'dark' | 'system') => {},
});

const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
};

// Usage in components
const ThemedComponent = () => {
  const { theme, themeName, setThemeName } = useTheme();
  return (
    <div style={{ background: theme.background, color: theme.text }}>
      <select 
        value={themeName}
        onChange={(e) => setThemeName(e.target.value as 'light' | 'dark' | 'system')}
      >
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="system">System</option>
      </select>
    </div>
  );
};

Conclusion:

React Context and Hooks provide a powerful, built-in solution for state management that's perfect for many use cases. By following best practices and understanding when to use Context, you can create more maintainable and efficient React applications.

The beauty of this approach lies in its simplicity and flexibility. It's a testament to React's evolution and its commitment to making component composition and state management more intuitive for developers.

✨Pro Tip: The best state management solution is often the simplest one that meets your needs. Don't overcomplicate things if Context and Hooks can do the job!

✨ I hope you found this helpful! Don’t forget to like and follow me for more React tips and tricks!

🚀 Follow me on X (Twitter) and LinkedIn for daily web development tips and insights!

💻 Keep coding, keep creating, and keep improving!

Wishing you all success and positivity on this wonderful day. Let’s make it amazing together! 🌟

DEV Community: Omkar Karale

I built a production-ready MERN boilerplates so you never have to again.

Every MERN project starts the same way.

Introducing MERN Auth Starter — ship auth in 10 minutes, not 5 days

What's actually inside

Security layer

Backend

Frontend

Production-ready out of the box

The demo mode is my favourite part

Who this is for

Tech stack at a glance

What it looks like

Get it

One last thing

Mastering React Performance: A Developer's Guide to Preventing Unnecessary Re-renders

Understanding Re-renders: The Foundation

1. React.memo: Your First Line of Defense

2. useCallback: Stabilizing Function References

3. useMemo: Caching Complex Calculations

4. State Management Best Practices

Lifting State Up (When Needed)

5. Advanced Optimization Techniques

Custom Hooks for Complex Logic

6. Profiling and Debugging

Using React Developer Tools

Performance Checklist

Common Pitfalls to Avoid

Looking Ahead: React 19 and Performance

Conclusion

react #javascript #webdev #performance

🎨 DaisyUI: The Game-Changer for Your Tailwind CSS Workflow

What's DaisyUI, and Why Should You Care?

✨ Why DaisyUI is Making Waves

1. Rich Component Library

2. Theme System That Actually Makes Sense

3. Framework Agnostic = Maximum Freedom

🚀 Getting Started in 2 Minutes

🤔 When Should You Use DaisyUI?

Perfect For:

Maybe Look Elsewhere When:

💪 DaisyUI vs The Competition

DaisyUI vs Material UI:

DaisyUI vs Ant Design:

🎯 Pro Tips for DaisyUI Masters

🎉 Conclusion

🔗 Useful Links

14 Must-Have React Libraries Every Beginner Developer Should Know in 2025: 🚀

Table of Contents:

1. React Router:

2. React Hook Form:

3. Formik:

4. Styled Components:

5. Material UI:

6. Chakra UI:

7. React Bootstrap:

8. Framer Motion:

9. React i18next:

10. Recharts:

11. React Virtualized:

12. React Helmet:

13. React Spinners:

14. React DnD:

Quick Tips for Using These Libraries 💡

When to Use What? 🤔

Conclusion: 🎉

React Context and Hooks: The Modern Approach to State Management 🚀

The Problem: Props Drilling

The Solution: Context + Hooks

1. Creating a Context

2. The Provider Pattern

3. Custom Hook for Better Developer Experience

4. Putting It All Together

Best Practices and Tips

1. Context Composition

2. Performance Optimization

3. TypeScript Integration

When to Use Context + Hooks

Real-World Example: Multi-theme Support

Conclusion: