ref and re renders

Author: nishant2106

src/classes/UserSearch.tsx

@@ -0,0 +1,46 @@
+import { Component } from "react";
+
+interface User {
+  name: string;
+  age: number;
+}
+interface UserSearchProps {
+  users: User[];
+}
+
+interface UserSearchState {
+  name: string;
+  user: User | undefined;
+}
+class UserSearch extends Component<UserSearchProps> {
+  state: UserSearchState = {
+    name: "",
+    user: undefined,
+  };
+
+  onClick = () => {
+    const foundUser = this.props.users.find(
+      (user) => user.name === this.state.name
+    );
+    this.setState({ user: foundUser });
+  };
+  render() {
+    const { name, user } = this.state;
+    return (
+      <div>
+        User Search
+        <input
+          value={name}
+          onChange={(e) => this.setState({ name: e.target.value })}
+        />
+        <button onClick={this.onClick}>Find User</button>
+        <div>
+          {user && user.name}
+          {user?.age}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default UserSearch;

src/index.tsx

@@ -1,12 +1,19 @@
-import ReactDom from "react-dom";
-import EventComponent from "./events/EventComponent";
-
+import { useEffect, useRef } from "react";
+import { createRoot } from "react-dom/client";
+// import EventComponent from "./events/EventComponent";
+import UserSearch from "./refs/UserSearch";
 const App = () => {
+  const count = useRef(0);
+
+  useEffect(() => {
+    count.current = count.current + 1;
+  });
+
   return (
     <div>
-      <EventComponent />
+      <UserSearch />
+      <h1>Render Count: {count.current}</h1>
     </div>
   );
 };
-
-ReactDom.render(<App />, document.querySelector("#root"));
+createRoot(document.querySelector("#root")!).render(<App />);

src/refs/UserSearch.tsx

@@ -0,0 +1,39 @@
+import { useState, useRef, useEffect } from "react";
+
+const users = [
+  { name: "Sarah", age: 20 },
+  { name: "Alex", age: 20 },
+  { name: "Michael", age: 20 },
+];
+const UserSearch: React.FC = () => {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [name, setName] = useState("");
+  const [user, setUser] = useState<{ name: string; age: number } | undefined>();
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const onClick = () => {
+    const foundUser = users.find((user) => user.name === name);
+    setUser(foundUser);
+  };
+
+  return (
+    <div>
+      User Search
+      <input
+        ref={inputRef}
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+      />
+      <button onClick={onClick}>Find User</button>
+      <div>
+        {user && user.name}
+        {user?.age}
+      </div>
+    </div>
+  );
+};
+
+export default UserSearch;