Forem: Gunnar Halen

Skeleton loaders with styled-components: How to improve UX on loading

Gunnar Halen — Fri, 11 Apr 2025 13:00:00 +0000

No one likes staring at a blank screen while waiting for data to load.

When we show nothing (or just a spinner), it creates uncertainty — users wonder if something’s broken. A better solution is to use skeleton loaders: visual placeholders that mimic the final layout while content is loading.

Today I'll show you how to build simple and reusable skeleton loaders using styled-components.

✅ The Problem: Empty states while loading

Imagine this:
You’re building a list of cards that loads from an API. During loading, the page looks like this:

[ Loading... ]

But what users really want is to see structure — something like:

[ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ]
[                  ]
[ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  ]
[ ▓▓▓▓▓▓▓▓▓        ]

Skeleton loaders give a visual cue of what’s coming and make the app feel faster.

💡 The Solution: Skeleton components with styled-components

Let’s build a reusable Skeleton component that can be styled to match any layout.

Step 1: Create a simple `Skeleton` block

import styled, { keyframes } from 'styled-components';

const shimmer = keyframes`
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
`;

export const Skeleton = styled.div`
  background: linear-gradient(
    90deg,
    #eee 25%,
    #f5f5f5 50%,
    #eee 75%
  );
  background-size: 1000px 100%;
  animation: ${shimmer} 1.5s infinite linear;
  border-radius: 4px;
`;

Now we can apply it anywhere!

Step 2: Use it in a list layout

export const CardSkeleton = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
    <Skeleton style={{ width: '100%', height: '180px' }} />
    <Skeleton style={{ width: '60%', height: '20px' }} />
    <Skeleton style={{ width: '40%', height: '16px' }} />
  </div>
);

You can use multiple variations for text lines, images, avatars — anything you need.

Step 3: Conditionally render based on loading state

function CardList({ loading, items }: { loading: boolean; items: any[] }) {
  if (loading) {
    return (
      <div>
        {Array.from({ length: 4 }).map((_, i) => (
          <CardSkeleton key={i} />
        ))}
      </div>
    );
  }

  return (
    <div>
      {items.map((item, i) => (
        <Card key={i} data={item} />
      ))}
    </div>
  );
}

✅ This gives users immediate feedback that content is loading — and the UI feels responsive.

⚙️ Why this approach is better than a spinner

Gives visual context of what’s coming
Reduces perceived loading time
Matches the final layout, avoiding layout shift
Can be customized to any shape: text, cards, images, etc.

🧠 Pro Tips

Match skeleton size to final content size (avoid jumpy layout)
Animate only when loading — avoid animating when content is ready
Group skeletons into reusable components (e.g., <UserCardSkeleton />)

🚀 Final Thoughts

Skeleton loaders are a great way to improve UX and make your app feel snappy — even when data takes time.

Using styled-components makes it easy to style and reuse them across your app.

👉 Do you use skeleton loaders in your UI? Got a pattern you love? Drop it in the comments below! 👇

🔗 Follow me for more React + styled-components tips!

Context API + TypeScript: How to avoid prop drilling in React

Gunnar Halen — Tue, 08 Apr 2025 20:43:54 +0000

Passing props down through many levels of components — also known as prop drilling — can quickly make your React app harder to maintain and understand.

The good news? React's Context API can help — and with TypeScript, you can make it fully type-safe.

In this post, I’ll show you how to create a context from scratch using React + TypeScript, and how it helps keep your code clean.

✅ The Problem: Prop drilling everywhere

Imagine this scenario:

You have a deeply nested component.
You need to pass the same data (like user info or theme) through multiple layers.

Without context, you end up doing something like this:

function App() {
  const user = { name: 'Alice' };
  return <Page user={user} />;
}

function Page({ user }: { user: { name: string } }) {
  return <Sidebar user={user} />;
}

function Sidebar({ user }: { user: { name: string } }) {
  return <UserInfo user={user} />;
}

function UserInfo({ user }: { user: { name: string } }) {
  return <p>Hello, {user.name}!</p>;
}

Every component in the chain has to receive and forward the user prop. This is where Context shines.

💡 The Solution: React Context API

We can create a UserContext and access the user data from any component — no drilling needed.

Step 1: Create the context and types

// UserContext.tsx
import { createContext, useContext } from 'react';

export type User = {
  name: string;
};

export const UserContext = createContext<User | null>(null);

export const useUser = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
};

Step 2: Create a provider component

// UserProvider.tsx
import { User, UserContext } from './UserContext';

export function UserProvider({ children }: { children: React.ReactNode }) {
  const user: User = { name: 'Alice' }; // this could come from API or auth

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

Step 3: Use it in your app

// App.tsx
import { UserProvider } from './UserProvider';
import { Page } from './Page';

export default function App() {
  return (
    <UserProvider>
      <Page />
    </UserProvider>
  );
}

And now, in any nested component:

// UserInfo.tsx
import { useUser } from './UserContext';

export function UserInfo() {
  const user = useUser();
  return <p>Hello, {user.name}!</p>;
}

No need to pass the user prop through multiple layers — just consume it directly from context.

⚙️ Why this approach works well

Centralized state without global libraries
Clean and decoupled components
Fully type-safe with TypeScript
Reusable across multiple components

🧠 Tips for using Context effectively

Split context into small focused providers (e.g., UserContext, ThemeContext, CartContext)
Wrap only the parts of the tree that need that data
Combine with custom hooks for better DX (useUser, useCart, etc.)
Avoid putting deeply dynamic data (like rapidly changing values) in context

🚀 Final Thoughts

Using the Context API with TypeScript is a powerful way to avoid prop drilling and keep your React code organized.

This pattern is simple, scalable, and widely used in production apps.

👉 Do you use context in your React projects? What’s your go-to pattern for avoiding prop drilling? Let’s discuss! 👇

🔗 Follow me for more React + TypeScript tips!

React.memo + useCallback: How to avoid unnecessary re-renders

Gunnar Halen — Fri, 21 Mar 2025 13:00:00 +0000

When working with React, it's common to run into performance issues caused by unnecessary component re-renders. This usually happens when child components are being re-rendered even if their props haven't changed.

Luckily, React gives us two simple tools to optimize this: React.memo and useCallback.

In this post, I'll explain how they work and when to use them — with practical examples.

✅ The Problem: Too many re-renders

Imagine you have a parent component that updates state frequently, and a child component that receives a prop (like a callback function). Even if the child doesn't need to re-render, it will — because the function prop is re-created on every render.

Here’s a simplified version of that scenario:

import { useState } from 'react';

function MyButton({ onClick }: { onClick: () => void }) {
  console.log('Button rendered');
  return <button onClick={onClick}>Click me</button>;
}

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

  const handleClick = () => {
    console.log('Clicked');
  };

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

Even if handleClick doesn’t change, it’s recreated on every render — causing MyButton to re-render too.

💡 The Solution: `React.memo` + `useCallback`

`React.memo`

React.memo is a higher-order component that memoizes a component, preventing unnecessary re-renders if the props haven't changed.

const MyButton = React.memo(({ onClick }: { onClick: () => void }) => {
  console.log('Button rendered');
  return <button onClick={onClick}>Click me</button>;
});

But this alone isn't enough — if you're passing a new function on every render, it still counts as a new prop.

`useCallback`

That's where useCallback comes in. It memoizes the function itself, so its reference only changes when its dependencies change.

const handleClick = useCallback(() => {
  console.log('Clicked');
}, []); // empty deps = function is stable

Together, these two tools ensure that MyButton won't re-render unless it actually needs to.

🔧 Full Example

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

const MyButton = React.memo(({ onClick }: { onClick: () => void }) => {
  console.log('Button rendered');
  return <button onClick={onClick}>Click me</button>;
});

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

  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

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

✅ Now MyButton only renders once unless handleClick or other props change.

🧠 When to use (and when not to)

Use React.memo when your component:
- Receives stable props (like functions or values that rarely change).
- Is pure and doesn't depend on external state.
- Is relatively expensive to render.
Use useCallback when:
- You're passing functions as props to memoized children.
- You want to keep a stable function reference between renders.

⚠️ Avoid overusing these tools — they add some complexity. Use them when profiling shows re-renders are hurting performance.

🚀 Final Thoughts

React.memo and useCallback are powerful tools to improve performance and avoid unnecessary rendering. Together, they help keep your app efficient and responsive.

Have you used React.memo or useCallback in your projects?

Let me know how — or if you’ve run into any gotchas! 👇

🔗 Follow me for more practical React + TypeScript tips!

How to Create Themes (light/dark) with React & Styled-components

Gunnar Halen — Fri, 14 Mar 2025 17:00:00 +0000

Creating a dark/light theme toggle is a great way to improve user experience — and it’s simpler than it looks, especially when using styled-components.

Today, I'll show you a quick and practical way to set up a theme system in React + styled-components, including how to dynamically switch between themes.

✅ The Problem: Multiple color schemes, but maintainable

When building components, it's common to need different color schemes (like light and dark mode).

Instead of hardcoding colors everywhere, how can we define and reuse them in a clean and flexible way?

💻 The Solution: ThemeProvider + theme objects

The ThemeProvider from styled-components allows us to pass a theme object that can be used inside all components.

Let's see how to do it step by step.

Step 1: Define your themes

// theme.ts
export const lightTheme = {
  background: '#ffffff',
  text: '#333333',
};

export const darkTheme = {
  background: '#333333',
  text: '#ffffff',
};

Here we define a light and a dark theme, each containing background and text colors.

You can add more properties later (e.g., buttons, borders).

Step 2: Add ThemeProvider to your App

import { ThemeProvider } from 'styled-components';
import { useState } from 'react';
import { lightTheme, darkTheme } from './theme';

function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  return (
    <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
      <YourComponents />
      <button onClick={() => setIsDarkMode(!isDarkMode)}>
        Toggle Theme
      </button>
    </ThemeProvider>
  );
}

Here, we are toggling between darkTheme and lightTheme using a simple button.

Step 3: Use theme inside styled-components

Now, in your styled-components, you can access the theme values directly via props — no need to import them inside each component:

import styled from 'styled-components';

const Wrapper = styled.div`
  background: ${({ theme }) => theme.background};
  color: ${({ theme }) => theme.text};
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
`;

✅ Note: The theme is injected automatically by ThemeProvider.

✅ Result: Dynamic theming!

With this approach:

You avoid hardcoding colors in components.
Components automatically adapt when the theme changes.
The theme is centralized and easy to maintain.

⚙️ Why this approach is great?

Centralized colors — no need to update each component when adjusting the theme.
Clean separation between logic (theme toggle) and style.
Scalable — easy to extend with more properties like buttons, borders, shadows.
Works seamlessly with styled-components' ecosystem.

🔑 Example: Applying to a Button

To make the button consistent with the page, where background and text colors match the overall theme, you should NOT invert background and color.

So here is the corrected version:

const Button = styled.button`
  background: ${({ theme }) => theme.background};
  color: ${({ theme }) => theme.text};
  padding: 10px 20px;
  border: 1px solid ${({ theme }) => theme.text};
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    opacity: 0.9;
  }
`;

➡️ Note: I added a border with theme.text to make the button visible on both themes.

You can adjust or remove this depending on your design system.

✅ Optional: Creating a contrasting button (primary variant)

If you want a button that contrasts with the background, like a primary action button, you can extend your theme to add a primary color:

export const lightTheme = {
  background: '#ffffff',
  text: '#333333',
  primary: '#007bff',
};

export const darkTheme = {
  background: '#333333',
  text: '#ffffff',
  primary: '#1e90ff',
};

And then use it in the button:

const PrimaryButton = styled.button`
  background: ${({ theme }) => theme.primary};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    opacity: 0.9;
  }
`;

🚀 Final Thoughts

Using ThemeProvider with styled-components makes it simple to create dynamic themes that enhance user experience.

This pattern is useful for projects of any size, and a great way to keep styles organized, flexible, and easy to maintain.

👉 How do you handle themes in your React projects?

Let me know in the comments! 👇

🔗 Follow me for more React + styled-components tips!

How to Create a Reusable React + TypeScript Component (Simple and Clean)

Gunnar Halen — Mon, 10 Mar 2025 20:09:13 +0000

One of the most common tasks in a React project is creating reusable components that are flexible and easy to maintain.

In this post, I’ll share a quick and practical pattern to build typed, reusable components in React + TypeScript — keeping it simple and effective for real-world use.

✅ The Problem: Reusability + Type Safety

Imagine you need a button component that supports different variants (like primary, secondary), handles clicks, and accepts any content inside it. How would you type it properly?

Here’s a clean way and efficient way to do it:

💻 The Solution: Union Types + React Props

type ButtonProps = {
  variant?: 'primary' | 'secondary';
  onClick: () => void;
  children: React.ReactNode;
};

export const Button = ({ variant = 'primary', onClick, children }: ButtonProps) => {
  return (
    <button className={`btn ${variant}`} onClick={onClick}>
      {children}
    </button>
  );
};

⚙️ Why this works great?

variant is defined as a union type ('primary' | 'secondary'), making them type-safe and auto-completed by your editor.
children allows flexibility to pass any content (like icons or text).
Default value for variant simplifies usage.
Easy to extend — just add more variants as needed.

🔑 Usage Example:

<Button onClick={() => console.log('Clicked!')}>
  Click me
</Button>

<Button variant="secondary" onClick={() => alert('Secondary clicked')}>
  Secondary Action
</Button>

💡 Pro Tip:

Want to add styled-components or CSS Modules? You can map variant directly to class names or styled variants like this:

<Button variant="secondary" onClick={() => alert('Secondary Clicked!')}>
  Secondary Action
</Button>

const StyledButton = styled.button<{ variant: 'primary' | 'secondary' }>`
  background: ${({ variant }) => (variant === 'primary' ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
`;

This is a simple pattern to keep React components clean, flexible, and maintainable — something that can help any Front-End Developer in daily work.

👉 How do you handle reusable components in your projects? Share your approach in the comments! 👇

Forem: Gunnar Halen

Skeleton loaders with styled-components: How to improve UX on loading

✅ The Problem: Empty states while loading

💡 The Solution: Skeleton components with styled-components

Step 1: Create a simple Skeleton block

Step 2: Use it in a list layout

Step 3: Conditionally render based on loading state

⚙️ Why this approach is better than a spinner

🧠 Pro Tips

🚀 Final Thoughts

Context API + TypeScript: How to avoid prop drilling in React

✅ The Problem: Prop drilling everywhere

💡 The Solution: React Context API

Step 1: Create the context and types

Step 2: Create a provider component

Step 3: Use it in your app

⚙️ Why this approach works well

🧠 Tips for using Context effectively

🚀 Final Thoughts

React.memo + useCallback: How to avoid unnecessary re-renders

✅ The Problem: Too many re-renders

💡 The Solution: React.memo + useCallback

React.memo

useCallback

🔧 Full Example

🧠 When to use (and when not to)

🚀 Final Thoughts

How to Create Themes (light/dark) with React & Styled-components

✅ The Problem: Multiple color schemes, but maintainable

💻 The Solution: ThemeProvider + theme objects

Step 1: Define your themes

Step 2: Add ThemeProvider to your App

Step 3: Use theme inside styled-components

✅ Result: Dynamic theming!

⚙️ Why this approach is great?

🔑 Example: Applying to a Button

✅ Optional: Creating a contrasting button (primary variant)

🚀 Final Thoughts

How to Create a Reusable React + TypeScript Component (Simple and Clean)

✅ The Problem: Reusability + Type Safety

💻 The Solution: Union Types + React Props

⚙️ Why this works great?

🔑 Usage Example:

💡 Pro Tip:

Step 1: Create a simple `Skeleton` block

💡 The Solution: `React.memo` + `useCallback`

`React.memo`

`useCallback`