feat(question): add #174 - re-render 3

jsartisan · Sep 18, 2024 · a6de51f · a6de51f
1 parent d4f174b
commit a6de51f
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 0 deletions.
diff --git a/challenges/174-re-render-3/README.md b/challenges/174-re-render-3/README.md
@@ -0,0 +1,6 @@
+Consider the app that renders a SearchBar component, which is memoized using React.memo. The SearchBar accepts an onSearch function as a prop to update the search query.
+
+**Can you answer the following**:
+- The SearchBar is memoized using React.memo, yet it still re-renders every time the parent component updates. Why does this happen?
+- What is causing the memoization of SearchBar to fail, and how would you resolve the issue?
+- Modify the code so that SearchBar only re-renders when it truly needs to, without breaking the functionality of the search feature.
diff --git a/challenges/174-re-render-3/info.yml b/challenges/174-re-render-3/info.yml
@@ -0,0 +1,11 @@
+difficulty: easy
+title: re-render 3
+type: question
+template: react
+tags: css, html, javascript
+author:
+  github: jsartisan
+  name: Pawan Kumar
+  avatar_url: https://avatars.githubusercontent.com/u/6636360?v=4
+published_date: '2024-09-18'
+
diff --git a/challenges/174-re-render-3/template.react.md b/challenges/174-re-render-3/template.react.md
@@ -0,0 +1,90 @@
+```css styles.css
+body {
+  font-family: sans-serif;
+}
+
+h1 {
+  font-size: 1.5rem;
+}
+```
+
+```jsx App.jsx
+import SearchBar from "./SearchBar";
+import React, { useState } from "react";
+
+function App() {
+  const [query, setQuery] = useState("");
+  const [items] = useState(["Apple", "Banana", "Orange", "Grapes"]);
+
+  const handleSearch = (searchTerm) => {
+    setQuery(searchTerm);
+  };
+
+  const filteredItems = items.filter((item) =>
+    item.toLowerCase().includes(query.toLowerCase()),
+  );
+
+  return (
+    <div>
+      <SearchBar onSearch={handleSearch} />
+      <ul>
+        {filteredItems.map((item, index) => (
+          <li key={index}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default App;
+
+```
+
+```jsx index.jsx
+import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./styles.css";
+
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+```html public/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+```
+
+```jsx SearchBar.jsx
+import { memo } from 'react';
+
+const SearchBar = memo(({ onSearch }) => {
+  console.log('SearchBar rendered');
+
+  return (
+    <input 
+      type="text" 
+      placeholder="Search..." 
+      onChange={(e) => onSearch(e.target.value)} 
+    />
+  );
+});
+
+export default SearchBar;
+```
+
+