User context in components in Astro - Performance & Optimization

Performance: User context in components

MEDIUM IMPACT

This affects how quickly components can access and render user-specific data, impacting interaction responsiveness and initial content load.

Sharing user data across multiple components

Astro

import { createContext, useContext } from 'react';
const UserContext = createContext(null);

<UserContext.Provider value={user}>
  <ComponentA />
  <ComponentB />
  <ComponentC />
</UserContext.Provider>

Using context shares user data globally without prop drilling, reducing re-renders and improving responsiveness.

📈 Performance Gainsingle re-render for user data, reduces INP by avoiding repeated prop updates

Sharing user data across multiple components

Astro

const user = fetchUser();
<ComponentA user={user} />
<ComponentB user={user} />
<ComponentC user={user} />

Passing user data as props to many components causes repeated re-renders and prop drilling, increasing render time.

📉 Performance Costtriggers multiple re-renders and prop updates, increasing INP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Prop drilling user data	Multiple prop updates	Multiple reflows per component	Higher paint cost due to repeated updates	[X] Bad
Using user context provider	Single context update	Single reflow for user data	Lower paint cost with fewer updates	[OK] Good

Rendering Pipeline

User context flows from the provider to consuming components, avoiding repeated prop passing. This reduces the number of layout recalculations and paint operations triggered by prop changes.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckExcessive re-renders caused by prop drilling and repeated context updates

Core Web Vital Affected

INP

This affects how quickly components can access and render user-specific data, impacting interaction responsiveness and initial content load.

Optimization Tips

1Use context providers to share user data globally instead of passing props deeply.

2Avoid prop drilling user data to reduce re-renders and improve interaction responsiveness.

3Check performance profiles to ensure user context reduces scripting and rendering overhead.

Performance Quiz - 3 Questions

What is the main performance benefit of using user context in components instead of passing user data via props?

A It reduces the number of re-renders by avoiding prop drilling.

B It increases the bundle size significantly.

C It delays the initial page load.

D It causes more layout shifts.

DevTools: Performance

How to check: Record a performance profile while interacting with components that use user data. Look for repeated scripting and rendering tasks caused by prop updates.

What to look for: Check for fewer scripting and rendering events when using context versus prop drilling, indicating better INP.

Practice

1. What is the main purpose of using createContext in Astro components?

easy

A. To share user data easily across multiple components

B. To create a new component

C. To style components with CSS

D. To fetch data from an API

Solution

1. Step 1: Understand what createContext does

   createContext creates a shared space to hold data accessible by many components.

2. Step 2: Identify the purpose related to user data

   It is used to share user information easily without passing props manually through every component.

3. Final Answer:

   To share user data easily across multiple components -> Option A

4. Quick Check:

   User context shares data = A [OK]

Hint: Remember: createContext sets shared data space [OK]

Common Mistakes:

• Thinking createContext creates components
• Confusing context with styling or API calls
• Assuming it fetches data automatically

2. Which of the following is the correct way to read user context inside an Astro component?

easy

A. const user = useState(UserContext);

B. const user = useContext(UserContext);

C. const user = Provider(UserContext);

D. const user = createContext(UserContext);

Solution

1. Step 1: Identify the function to read context

   useContext is the hook used to access context data inside components.

2. Step 2: Check the syntax correctness

   The correct syntax is const user = useContext(UserContext); to get the user data.

3. Final Answer:

   const user = useContext(UserContext); -> Option B

4. Quick Check:

   Reading context uses useContext = D [OK]

Hint: Use useContext to read context data inside components [OK]

Common Mistakes:

• Using createContext to read data
• Confusing Provider with reading context
• Using useState instead of useContext

3. Given this Astro component code snippet:

const UserContext = createContext();

function UserProfile() {
  const user = useContext(UserContext);
  return <div>Hello, {user.name}!</div>;
}

function App() {
  return (
    <UserContext.Provider value={{ name: 'Alice' }}>
      <UserProfile />
    </UserContext.Provider>
  );
}

What will be rendered on the page?

medium

A. Error: useContext called outside Provider

B. Hello, undefined!

C. Hello, user!

D. Hello, Alice!

Solution

1. Step 1: Check the Provider value

   The UserContext.Provider wraps UserProfile and provides { name: 'Alice' } as context.

2. Step 2: Check how UserProfile uses context

   UserProfile reads the context with useContext(UserContext) and accesses user.name.

3. Final Answer:

   Hello, Alice! -> Option D

4. Quick Check:

   Provider value passed correctly = C [OK]

Hint: Provider value sets user data; useContext reads it [OK]

Common Mistakes:

• Forgetting to wrap component in Provider
• Expecting error when Provider is present
• Using wrong property name for user

4. Identify the error in this Astro component code:

const UserContext = createContext();

function UserProfile() {
  const user = useContext(UserContext);
  return <div>Welcome, {user.name}!</div>;
}

function App() {
  return (
    <UserProfile />
  );
}

What is the problem?

medium

A. useContext is used incorrectly; should be useState

B. UserContext is not created properly

C. UserProfile is not wrapped in UserContext.Provider, so context is undefined

D. UserProfile should not return JSX

Solution

1. Step 1: Check if Provider wraps UserProfile

   The UserProfile component uses useContext(UserContext) but is not inside a UserContext.Provider.

2. Step 2: Understand the effect of missing Provider

   Without the Provider, the context value is undefined, so user.name will cause an error or be undefined.

3. Final Answer:

   UserProfile is not wrapped in UserContext.Provider, so context is undefined -> Option C

4. Quick Check:

   Missing Provider causes undefined context = B [OK]

Hint: Always wrap consumers in Provider to avoid undefined context [OK]

Common Mistakes:

• Assuming useContext works without Provider
• Confusing useContext with useState
• Thinking JSX return is invalid

5. You want to create a user context that provides both name and role to nested components. Which code correctly sets up the context and accesses both values inside a child component?

hard

A. const UserContext = createContext();

function UserProvider({ children }) {
return (
<UserContext.Provider value={{ name: 'Bob', role: 'admin' }}>
{children}
</UserContext.Provider>
);
}

function Dashboard() {
const user = useContext(UserContext);
return <div>User: {user.name}, Role: {user.role}</div>;
}

B. const UserContext = createContext({ name: 'Bob', role: 'admin' });

function Dashboard() {
const user = useContext(UserContext);
return <div>User: {user.name}, Role: {user.role}</div>;
}

C. const UserContext = createContext();

function Dashboard() {
const user = useContext(UserContext);
return <div>User: {user.name}, Role: {user.role}</div>;
}

function UserProvider() {
return <UserContext.Provider value={{ name: 'Bob' }} />;
}

D. const UserContext = createContext();

function UserProvider({ children }) {
return (
<UserContext.Provider value={{ name: 'Bob' }}>
{children}
</UserContext.Provider>
);
}

function Dashboard() {
const user = useContext(UserContext);
return <div>User: {user.name}, Role: {user.role}</div>;
}

Solution

1. Step 1: Check Provider sets both name and role

   const UserContext = createContext();
   
   function UserProvider({ children }) {
     return (
       <UserContext.Provider value={{ name: 'Bob', role: 'admin' }}>
         {children}
       </UserContext.Provider>
     );
   }
   
   function Dashboard() {
     const user = useContext(UserContext);
     return <div>User: {user.name}, Role: {user.role}</div>;
   }

   's UserProvider passes { name: 'Bob', role: 'admin' } as value, providing both properties.

2. Step 2: Verify Dashboard reads both values

   Dashboard uses useContext(UserContext) and accesses user.name and user.role correctly.

3. Final Answer:

   correctly sets up the context and accesses both name and role -> Option A

4. Quick Check:

   Provider value includes all needed fields = A [OK]

Hint: Provider value must include all user info needed by children [OK]

Common Mistakes:

• Setting default context but not wrapping Provider
• Provider missing role property
• Provider not wrapping children properly