fix: hook import

.grit/patterns/react_hooks.grit

@@ -314,15 +314,21 @@ pattern adjust_imports() {
         $hooks = join(list = $hooks, separator = ", "),
         or {
             // ugly dealing with imports
-            contains import_specifier(name = `Component`) => `$hooks`,
+            contains import_specifier(name = `Component`) as $specifier where {
+                $specifier <: within import_statement($source) where {
+                    $source <: `"react"`,
+                },
+                $specifier => $hooks,
+            },
             contains `import React, { $x } from "react"` => `import React, { $x, $hooks } from "react"`,
             contains `import React from "react"` as $i where {
                 if ($i <: not contains namespace_import()) {
                     $i => `import React, { $hooks } from 'react';`
                 } else {
                     $i => `$i\nimport { $hooks } from 'react';`
                 }
-            }
+            },
+            true where $hooks <: ensure_import_from(`'react'`),
         }
     }
 }

.grit/patterns/react_to_hooks.md

@@ -766,6 +766,8 @@ class MyComponent extends Component<PropsWithChildren> {
 ```
 
 ```ts
+import { useRef } from 'react';
+
 const MyComponent = () => {
   /**
    * Comment on a private class property
@@ -1154,3 +1156,36 @@ export const Nice = (inputProps) => {
   return null;
 };
 ```
+
+## Adds import from React when Component imported from elsewhere
+
+```js
+import { Component } from 'base';
+
+export default class Loader extends Component {
+  async componentDidMount() {
+    await loadSomething();
+  }
+
+  render() {
+    return null;
+  }
+}
+```
+
+```ts
+import { Component } from 'base';
+import { useEffect } from 'react';
+
+const Loader = () => {
+  useEffect(() => {
+    (async () => {
+      await loadSomething();
+    })();
+  }, []);
+
+  return null;
+};
+
+export default Loader;
+```