Hooks inside Class component

[karthikcodes6]

💬 Question

Hi team, I have only one question. I just saw the source code of KittenTricks that I get to know you're using hooks inside the class component. Can anyone tell me how is it possible? I'm posting the code for your reference

export class Theming {
   static useTheming = (themes: Record<Mapping, Record<Theme, any>>,
                       mapping: Mapping,
                       theme: Theme): [ThemeContextValue, any] => {

    const [currentTheme, setCurrentTheme] = React.useState<Theme>(theme);

    React.useEffect(() => {
      const subscription = Appearance.addChangeListener((preferences: AppearancePreferences): void => {
        const appearanceTheme: Theme = Theming.createAppearanceTheme(
          preferences.colorScheme,
          theme,
        );
        setCurrentTheme(appearanceTheme);
      });

      return () => subscription.remove();
    }, []);

    const isDarkMode = (): boolean => {
      return currentTheme === 'dark';
    };

    const createTheme = (upstreamTheme: Theme): any => {
      return { ...themes[mapping][currentTheme], ...themes[mapping][upstreamTheme][currentTheme] };
    };
}

[artyorsh]

It's not a hook but a static method, which is called, for example, here.

[karthikcodes6]

Anyway, as per the react hook rules. Hooks cannot be used inside the class component. Then how you implemented here?

[artyorsh]

It's not used, it's just declared. And used in other places

[karthikcodes6]

I'm still confused. How can we even declare hook inside the class. Since it's prohibited to do so by the official react team itself. It'll be more helpful if you can explain/give some resources about how it works.

[artyorsh]

@karthikeyan676 you should probably read about static instances

[karthikcodes6]

Sure. Thanks!