Theo's Typesafe Cult•2mo ago

React context in Server Component Page

I have a server component page where I want to provide a context having this file and adding it to the page it throws error?? What Im missing here

'use client';

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

import type { PropsWithChildren } from 'react';

export enum FormMode {
  'VIEW' = 'VIEW',
  'EDIT' = 'EDIT',
  'CREATE' = 'CREATE',
}

type FormModeContextType = {
  mode: FormMode;
  setMode: (mode: FormMode) => void;
  isViewMode: boolean;
  isEditMode: boolean;
  isCreateMode: boolean;
};

const FormModeContext = createContext<FormModeContextType | undefined>(
  undefined,
);

export const useFormMode = (): FormModeContextType => {
  const context = useContext(FormModeContext);

  if (!context) {
    throw new Error('useFormMode must be used within a FormModeProvider');
  }

  return context;
};

export const FormModeProvider = ({
  children,
  initialFormMode,
}: PropsWithChildren<{ initialFormMode: FormMode }>) => {
  const [mode, setMode] = useState<FormMode>(() => initialFormMode);

  // Memoize the context value to avoid unnecessary re-renders
  const value = useMemo(
    () => ({
      mode,
      setMode,
      isViewMode: mode === FormMode.VIEW,
      isEditMode: mode === FormMode.EDIT,
      isCreateMode: mode === FormMode.CREATE,
    }),
    [mode],
  );

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

'use client';

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

import type { PropsWithChildren } from 'react';

export enum FormMode {
  'VIEW' = 'VIEW',
  'EDIT' = 'EDIT',
  'CREATE' = 'CREATE',
}

type FormModeContextType = {
  mode: FormMode;
  setMode: (mode: FormMode) => void;
  isViewMode: boolean;
  isEditMode: boolean;
  isCreateMode: boolean;
};

const FormModeContext = createContext<FormModeContextType | undefined>(
  undefined,
);

export const useFormMode = (): FormModeContextType => {
  const context = useContext(FormModeContext);

  if (!context) {
    throw new Error('useFormMode must be used within a FormModeProvider');
  }

  return context;
};

export const FormModeProvider = ({
  children,
  initialFormMode,
}: PropsWithChildren<{ initialFormMode: FormMode }>) => {
  const [mode, setMode] = useState<FormMode>(() => initialFormMode);

  // Memoize the context value to avoid unnecessary re-renders
  const value = useMemo(
    () => ({
      mode,
      setMode,
      isViewMode: mode === FormMode.VIEW,
      isEditMode: mode === FormMode.EDIT,
      isCreateMode: mode === FormMode.CREATE,
    }),
    [mode],
  );

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

Page RSC

export default async function LocationView({
  params,
}: {
  params: { locationId: string };
}) {
  ...

  return (
      <FormModeProvider initialFormMode={FormMode.VIEW}>
        <LocationForm defaultFormValues={defaultFormValues} />
      </FormModeProvider>
  );
}

export default async function LocationView({
  params,
}: {
  params: { locationId: string };
}) {
  ...

  return (
      <FormModeProvider initialFormMode={FormMode.VIEW}>
        <LocationForm defaultFormValues={defaultFormValues} />
      </FormModeProvider>
  );
}

Its telling me to use it withing parent that is client component? Why to? why I cant directly use it in RSC

1 Reply

usmanabdurrehman•2mo ago

because React Context is a Client thing? Its a way of sharing stuff between components in Client, not in the server.

Gaming

Programming

React context in Server Component Page