Skip to content

re-render 3 #174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
jsartisan opened this issue Sep 18, 2024 · 1 comment · May be fixed by #175
Open

re-render 3 #174

jsartisan opened this issue Sep 18, 2024 · 1 comment · May be fixed by #175
Labels
new-challenge question Further information is requested react

Comments

@jsartisan
Copy link
Owner

jsartisan commented Sep 18, 2024 •
edited
Loading

Info

difficulty: easy
title: re-render 3
type: question
template: react
tags: css, html, javascript

Question

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.

Template

styles.css

body {
  font-family: sans-serif;
}

h1 {
  font-size: 1.5rem;
}

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;

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>
);

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>

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;
@jsartisan jsartisan added question Further information is requested react new-challenge labels Sep 18, 2024
github-actions bot pushed a commit that referenced this issue Sep 18, 2024
@jsartisan
feat(question): add #174 - re-render 3
a6de51f
@github-actions GitHub Actions
Copy link
Contributor

#175 - Pull Request updated.

@github-actions github-actions bot linked a pull request Sep 18, 2024 that will close this issue
Open
github-actions bot pushed a commit that referenced this issue Sep 18, 2024
@jsartisan
feat(question): add #174 - re-render 3
3f0fe6b
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
new-challenge question Further information is requested react
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

#174 - re-render 3 jsartisan/frontend-challenges
1 participant
@jsartisan