Feedback from Zev Spitz

[zspitz]

1. Where is the search input? I don't see it anywhere.
2. Is this the same delay I'm seeing every time the theme is toggled?
3. Since the problem is not in networking calls, but rather in rerendering, some pagination solution might help: instead of rerendering hundreds of CardComponents with all their children, render only 10 or 20. MUI has a Pagination component, which can be used like this. You might consider integrating with React Router to make the page number part of the query parameters.

[artvax0]

Hi @zspitz,

1. Where is the search input? I don't see it anywhere.

The respiratory has been updated to include the Searchbar component in the most recent commit - 642bfa4d3db48887393f17a18a5c591f84ea73fc, I apologize for the inconvenience I have caused by not commiting the component.

2. Is this the same delay I'm seeing every time the theme is toggled?

The input delay is roughly the same per character inputted. (View attached image below)

3. Since the problem is not in networking calls, but rather in rerendering, some pagination solution might help: instead of rerendering hundreds of CardComponents with all their children, render only 10 or 20. MUI has a Pagination component, which can be used like this. You might consider integrating with React Router to make the page number part of the query parameters.

This looks like a great possible solution to this, if this issue cannot be resolved any other way I'll check this out, thank you!

Would appreciate if you could reply with another feedback now that the repository has been properly updated with the Searchbar component.

[zspitz]

Running ESLint (can be run using npx eslint from the root folder) reports the following errors.

(You can also see these errors in VS Code using the extension.)

Notes:

• Unused variables (no-unused-vars) often indicate misspelled variables, or some other mistake in the code.
• prop-types is a mechanism to tell React what should be the types of the props passed into components. React will report an error in the console if the value passed in doesn't match the defined type. ESLint is complaining that components don't have type definitions for the props.
• no-unescaped-entities
• In JavaScript, every function statement or expression, and every arrow function, tells the runtime to create a new function instance. That function instance needs access to the local variables in its environment, including function-scoped variables from outside the function instance. Therefore, JavaScript creates local copies of the variables for each function instance, and sends them along with the function - AKA "closes over" the variables, or "closures". useCallback and useEffect need to be told about these variables via their dependency lists; otherwise they return/run the previous function instance which refers to older copies of the variables. (exhaustive-deps).
• Hooks must always run in the exact same order. Thus, a hook cannot be called from within a function, or within some control flow block, such as within an if (rules-of-hooks).

cards-project\src\App.jsx
  1:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\components\EditProfile.jsx
  2:8    error  'React' is defined but never used                 no-unused-vars
  5:39   error  'sx' is missing in props validation               react/prop-types
  5:43   error  'setOpenSettings' is missing in props validation  react/prop-types
  5:60   error  'data' is missing in props validation             react/prop-types
  5:66   error  'errors' is missing in props validation           react/prop-types
  5:74   error  'handleChange' is missing in props validation     react/prop-types
  5:88   error  'validateForm' is missing in props validation     react/prop-types
  5:102  error  'onSubmit' is missing in props validation         react/prop-types

cards-project\src\components\Error.jsx
  1:8   error  'React' is defined but never used              no-unused-vars
  5:18  error  'errorMessage' is missing in props validation  react/prop-types

cards-project\src\components\PageHeader.jsx
  2:8   error  'React' is defined but never used          no-unused-vars
  4:37  error  'title' is missing in props validation     react/prop-types
  4:44  error  'subtitle' is missing in props validation  react/prop-types
  4:54  error  'sx' is missing in props validation        react/prop-types

cards-project\src\components\Spinner.jsx
  1:8   error  'React' is defined but never used        no-unused-vars
  4:20  error  'color' is missing in props validation   react/prop-types
  4:39  error  'size' is missing in props validation    react/prop-types
  4:50  error  'height' is missing in props validation  react/prop-types

cards-project\src\components\UserProfile.jsx
   2:8    error  'React' is defined but never used                              no-unused-vars
  11:39   error  'userId' is missing in props validation                        react/prop-types
  11:47   error  'title' is missing in props validation                         react/prop-types
  11:54   error  'styles' is missing in props validation                        react/prop-types
  11:67   error  'userData' is missing in props validation                      react/prop-types
  39:16   error  'title.toUpperCase' is missing in props validation             react/prop-types
  45:35   error  'userData.image' is missing in props validation                react/prop-types
  45:41   error  'userData.image.alt' is missing in props validation            react/prop-types
  45:60   error  'userData.image' is missing in props validation                react/prop-types
  45:66   error  'userData.image.url' is missing in props validation            react/prop-types
  65:108  error  'userData.name' is missing in props validation                 react/prop-types
  65:113  error  'userData.name.first' is missing in props validation           react/prop-types
  68:109  error  'userData.name' is missing in props validation                 react/prop-types
  68:114  error  'userData.name.middle' is missing in props validation          react/prop-types
  71:107  error  'userData.name' is missing in props validation                 react/prop-types
  71:112  error  'userData.name.last' is missing in props validation            react/prop-types
  74:103  error  'userData.phone' is missing in props validation                react/prop-types
  77:103  error  'userData.email' is missing in props validation                react/prop-types
  80:105  error  'userData.address' is missing in props validation              react/prop-types
  80:113  error  'userData.address.country' is missing in props validation      react/prop-types
  83:103  error  'userData.address' is missing in props validation              react/prop-types
  83:111  error  'userData.address.state' is missing in props validation        react/prop-types
  83:150  error  'userData.address' is missing in props validation              react/prop-types
  83:158  error  'userData.address.state' is missing in props validation        react/prop-types
  86:102  error  'userData.address' is missing in props validation              react/prop-types
  86:110  error  'userData.address.city' is missing in props validation         react/prop-types
  89:104  error  'userData.address' is missing in props validation              react/prop-types
  89:112  error  'userData.address.street' is missing in props validation       react/prop-types
  92:110  error  'userData.address' is missing in props validation              react/prop-types
  92:118  error  'userData.address.houseNumber' is missing in props validation  react/prop-types
  95:101  error  'userData.address' is missing in props validation              react/prop-types
  95:109  error  'userData.address.zip' is missing in props validation          react/prop-types

cards-project\src\components\about\AboutChooseUs.jsx
   2:8    error  'React' is defined but never used                                no-unused-vars
  21:155  error  `"` can be escaped with `"`, `“`, `"`, `”`  react/no-unescaped-entities
  21:166  error  `"` can be escaped with `"`, `“`, `"`, `”`  react/no-unescaped-entities

cards-project\src\components\about\AboutHeader.jsx
  2:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\components\about\AboutHowItWorks.jsx
   2:8    error  'React' is defined but never used                                no-unused-vars
  23:159  error  `"` can be escaped with `"`, `“`, `"`, `”`  react/no-unescaped-entities
  23:170  error  `"` can be escaped with `"`, `“`, `"`, `”`  react/no-unescaped-entities

cards-project\src\components\about\AboutIntro.jsx
  2:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\components\about\AboutMission.jsx
  2:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\components\cards\AddNewCardButton.jsx
  1:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\components\cards\CardActionBar.jsx
   3:8   error  'React' is defined but never used                no-unused-vars
  11:41  error  'handleDel' is missing in props validation       react/prop-types
  11:52  error  'handleLike' is missing in props validation      react/prop-types
  11:64  error  'handleEdit' is missing in props validation      react/prop-types
  11:76  error  'likes' is missing in props validation           react/prop-types
  11:83  error  'cardId' is missing in props validation          react/prop-types
  11:91  error  'userId' is missing in props validation          react/prop-types
  15:25  error  'likes.includes' is missing in props validation  react/prop-types

cards-project\src\components\cards\CardBody.jsx
  1:8   error  'React' is defined but never used             no-unused-vars
  7:36  error  'phone' is missing in props validation        react/prop-types
  7:43  error  'street' is missing in props validation       react/prop-types
  7:51  error  'houseNumber' is missing in props validation  react/prop-types
  7:64  error  'city' is missing in props validation         react/prop-types
  7:70  error  'state' is missing in props validation        react/prop-types
  7:77  error  'country' is missing in props validation      react/prop-types
  7:86  error  'zip' is missing in props validation          react/prop-types
  7:91  error  'email' is missing in props validation        react/prop-types
  7:98  error  'web' is missing in props validation          react/prop-types

cards-project\src\components\cards\CardComponent.jsx
   2:8    error  'React' is defined but never used                          no-unused-vars
   9:41   error  'card' is missing in props validation                      react/prop-types
   9:47   error  'handleDel' is missing in props validation                 react/prop-types
   9:58   error  'handleLike' is missing in props validation                react/prop-types
   9:70   error  'handleEdit' is missing in props validation                react/prop-types
  14:87   error  'card._id' is missing in props validation                  react/prop-types
  15:52   error  'card.image' is missing in props validation                react/prop-types
  15:58   error  'card.image.url' is missing in props validation            react/prop-types
  15:73   error  'card.image' is missing in props validation                react/prop-types
  15:79   error  'card.image.alt' is missing in props validation            react/prop-types
  15:96   error  'card.title' is missing in props validation                react/prop-types
  15:118  error  'card.subtitle' is missing in props validation             react/prop-types
  16:43   error  'card.phone' is missing in props validation                react/prop-types
  16:63   error  'card.address' is missing in props validation              react/prop-types
  16:71   error  'card.address.street' is missing in props validation       react/prop-types
  16:97   error  'card.address' is missing in props validation              react/prop-types
  16:105  error  'card.address.houseNumber' is missing in props validation  react/prop-types
  16:129  error  'card.address' is missing in props validation              react/prop-types
  16:137  error  'card.address.city' is missing in props validation         react/prop-types
  16:155  error  'card.address' is missing in props validation              react/prop-types
  16:163  error  'card.address.state' is missing in props validation        react/prop-types
  16:184  error  'card.address' is missing in props validation              react/prop-types
  16:192  error  'card.address.country' is missing in props validation      react/prop-types
  16:211  error  'card.address' is missing in props validation              react/prop-types
  16:219  error  'card.address.zip' is missing in props validation          react/prop-types
  16:236  error  'card.email' is missing in props validation                react/prop-types
  16:253  error  'card.web' is missing in props validation                  react/prop-types
  18:114  error  'card.likes' is missing in props validation                react/prop-types
  18:134  error  'card._id' is missing in props validation                  react/prop-types
  18:152  error  'card.user_id' is missing in props validation              react/prop-types

cards-project\src\components\cards\CardHeaderComponent.jsx
  2:8   error  'React' is defined but never used          no-unused-vars
  4:47  error  'img' is missing in props validation       react/prop-types
  4:52  error  'alt' is missing in props validation       react/prop-types
  4:57  error  'title' is missing in props validation     react/prop-types
  4:64  error  'subtitle' is missing in props validation  react/prop-types

cards-project\src\components\cards\Cards.jsx
   1:8   error  'React' is defined but never used              no-unused-vars
   7:33  error  'cards' is missing in props validation         react/prop-types
   7:40  error  'handleDelete' is missing in props validation  react/prop-types
   7:54  error  'handleLike' is missing in props validation    react/prop-types
  15:14  error  'cards.map' is missing in props validation     react/prop-types

cards-project\src\components\cards\CardsFeedback.jsx
   1:8   error  'React' is defined but never used              no-unused-vars
   7:46  error  'isLoading' is missing in props validation     react/prop-types
   7:57  error  'cards' is missing in props validation         react/prop-types
   7:64  error  'error' is missing in props validation         react/prop-types
   7:71  error  'handleDelete' is missing in props validation  react/prop-types
   7:85  error  'handleLike' is missing in props validation    react/prop-types
  10:24  error  'cards.length' is missing in props validation  react/prop-types

cards-project\src\components\forms\CardForm.jsx
    1:8   error  'React' is defined but never used                    no-unused-vars
    6:5   error  'onSubmit' is missing in props validation            react/prop-types
    7:5   error  'onReset' is missing in props validation             react/prop-types
    8:5   error  'validateForm' is missing in props validation        react/prop-types
    9:5   error  'title' is missing in props validation               react/prop-types
   10:5   error  'errors' is missing in props validation              react/prop-types
   11:5   error  'data' is missing in props validation                react/prop-types
   12:5   error  'onInputChange' is missing in props validation       react/prop-types
   25:31  error  'errors.title' is missing in props validation        react/prop-types
   33:31  error  'errors.subtitle' is missing in props validation     react/prop-types
   41:31  error  'errors.description' is missing in props validation  react/prop-types
   50:31  error  'errors.phone' is missing in props validation        react/prop-types
   59:31  error  'errors.email' is missing in props validation        react/prop-types
   67:31  error  'errors.webUrl' is missing in props validation       react/prop-types
   76:31  error  'errors.imageUrl' is missing in props validation     react/prop-types
   85:31  error  'errors.imageAlt' is missing in props validation     react/prop-types
   94:31  error  'errors.country' is missing in props validation      react/prop-types
  102:31  error  'errors.state' is missing in props validation        react/prop-types
  111:31  error  'errors.city' is missing in props validation         react/prop-types
  119:31  error  'errors.street' is missing in props validation       react/prop-types
  128:31  error  'errors.houseNumber' is missing in props validation  react/prop-types
  137:31  error  'errors.zip' is missing in props validation          react/prop-types

cards-project\src\components\forms\EditForm.jsx
   1:8   error  'React' is defined but never used                 no-unused-vars
   5:10  error  'useNavigate' is defined but never used           no-unused-vars
   8:3   error  'setOpenSettings' is missing in props validation  react/prop-types
   9:3   error  'onSubmit' is missing in props validation         react/prop-types
  10:3   error  'validateForm' is missing in props validation     react/prop-types
  11:3   error  'color' is missing in props validation            react/prop-types
  12:3   error  'spacing' is missing in props validation          react/prop-types
  13:3   error  'styles' is missing in props validation           react/prop-types
  14:3   error  'children' is missing in props validation         react/prop-types

cards-project\src\components\forms\EditProfileForm.jsx
    1:8   error  'React' is defined but never used                    no-unused-vars
    6:3   error  'setOpenSettings' is missing in props validation     react/prop-types
    7:3   error  'onSubmit' is missing in props validation            react/prop-types
    8:3   error  'validateForm' is missing in props validation        react/prop-types
    9:3   error  'errors' is missing in props validation              react/prop-types
   10:3   error  'data' is missing in props validation                react/prop-types
   11:3   error  'onInputChange' is missing in props validation       react/prop-types
   22:23  error  'errors.first' is missing in props validation        react/prop-types
   29:23  error  'errors.middle' is missing in props validation       react/prop-types
   37:23  error  'errors.last' is missing in props validation         react/prop-types
   44:23  error  'errors.phone' is missing in props validation        react/prop-types
   51:23  error  'errors.url' is missing in props validation          react/prop-types
   58:23  error  'errors.alt' is missing in props validation          react/prop-types
   65:23  error  'errors.country' is missing in props validation      react/prop-types
   72:23  error  'errors.state' is missing in props validation        react/prop-types
   80:23  error  'errors.city' is missing in props validation         react/prop-types
   87:23  error  'errors.street' is missing in props validation       react/prop-types
   94:23  error  'errors.houseNumber' is missing in props validation  react/prop-types
  101:23  error  'errors.zip' is missing in props validation          react/prop-types

cards-project\src\components\forms\Form.jsx
   1:8  error  'React' is defined but never used              no-unused-vars
  11:3  error  'title' is missing in props validation         react/prop-types
  12:3  error  'onSubmit' is missing in props validation      react/prop-types
  13:3  error  'onReset' is missing in props validation       react/prop-types
  14:3  error  'validateForm' is missing in props validation  react/prop-types
  15:3  error  'to' is missing in props validation            react/prop-types
  16:3  error  'color' is missing in props validation         react/prop-types
  17:3  error  'spacing' is missing in props validation       react/prop-types
  18:3  error  'styles' is missing in props validation        react/prop-types
  19:3  error  'children' is missing in props validation      react/prop-types

cards-project\src\components\forms\FormButton.jsx
   1:8  error  'React' is defined but never used           no-unused-vars
   4:5  error  'variant' is missing in props validation    react/prop-types
   5:5  error  'component' is missing in props validation  react/prop-types
   6:5  error  'size' is missing in props validation       react/prop-types
   7:5  error  'color' is missing in props validation      react/prop-types
   8:5  error  'onClick' is missing in props validation    react/prop-types
   9:5  error  'disabled' is missing in props validation   react/prop-types
  10:5  error  'node' is missing in props validation       react/prop-types

cards-project\src\components\forms\Input.jsx
   1:8  error  'React' is defined but never used          no-unused-vars
   6:5  error  'variant' is missing in props validation   react/prop-types
   7:5  error  'type' is missing in props validation      react/prop-types
   8:5  error  'name' is missing in props validation      react/prop-types
   9:5  error  'data' is missing in props validation      react/prop-types
  10:5  error  'label' is missing in props validation     react/prop-types
  11:5  error  'required' is missing in props validation  react/prop-types
  12:5  error  'error' is missing in props validation     react/prop-types
  13:5  error  'onChange' is missing in props validation  react/prop-types

cards-project\src\components\forms\LoginForm.jsx
   1:8   error  'React' is defined but never used                 no-unused-vars
  10:5   error  'onSubmit' is missing in props validation         react/prop-types
  11:5   error  'onReset' is missing in props validation          react/prop-types
  12:5   error  'validateForm' is missing in props validation     react/prop-types
  13:5   error  'title' is missing in props validation            react/prop-types
  14:5   error  'errors' is missing in props validation           react/prop-types
  15:5   error  'data' is missing in props validation             react/prop-types
  16:5   error  'onInputChange' is missing in props validation    react/prop-types
  29:31  error  'errors.email' is missing in props validation     react/prop-types
  37:31  error  'errors.password' is missing in props validation  react/prop-types

cards-project\src\components\forms\SignupForm.jsx
    1:8   error  'React' is defined but never used                      no-unused-vars
    8:3   error  'onSubmit' is missing in props validation              react/prop-types
    9:3   error  'onReset' is missing in props validation               react/prop-types
   10:3   error  'validateForm' is missing in props validation          react/prop-types
   11:3   error  'title' is missing in props validation                 react/prop-types
   12:3   error  'errors' is missing in props validation                react/prop-types
   13:3   error  'data' is missing in props validation                  react/prop-types
   14:3   error  'onInputChange' is missing in props validation         react/prop-types
   15:3   error  'handleChangeCheckbox' is missing in props validation  react/prop-types
   29:23  error  'errors.first' is missing in props validation          react/prop-types
   37:23  error  'errors.middle' is missing in props validation         react/prop-types
   46:23  error  'errors.last' is missing in props validation           react/prop-types
   55:23  error  'errors.phone' is missing in props validation          react/prop-types
   64:23  error  'errors.email' is missing in props validation          react/prop-types
   73:23  error  'errors.password' is missing in props validation       react/prop-types
   81:23  error  'errors.url' is missing in props validation            react/prop-types
   90:23  error  'errors.alt' is missing in props validation            react/prop-types
   99:23  error  'errors.state' is missing in props validation          react/prop-types
  108:23  error  'errors.country' is missing in props validation        react/prop-types
  116:23  error  'errors.city' is missing in props validation           react/prop-types
  124:23  error  'errors.street' is missing in props validation         react/prop-types
  133:23  error  'errors.houseNumber' is missing in props validation    react/prop-types
  141:23  error  'errors.zip' is missing in props validation            react/prop-types
  151:44  error  'data.isBusiness' is missing in props validation       react/prop-types

cards-project\src\components\routes\NavBarItem.jsx
  1:8   error  'React' is defined but never used             no-unused-vars
  5:38  error  'to' is missing in props validation           react/prop-types
  5:42  error  'sx' is missing in props validation           react/prop-types
  5:46  error  'label' is missing in props validation        react/prop-types
  5:53  error  'buttonType' is missing in props validation   react/prop-types
  5:74  error  'buttonStyle' is missing in props validation  react/prop-types

cards-project\src\components\routes\NavBarLink.jsx
  1:8   error  'React' is defined but never used          no-unused-vars
  4:37  error  'to' is missing in props validation        react/prop-types
  4:41  error  'sx' is missing in props validation        react/prop-types
  4:45  error  'children' is missing in props validation  react/prop-types

cards-project\src\hooks\useCards.js
   31:8  warning  React Hook useCallback has a missing dependency: 'setSnack'. Either include it or remove the dependency array                   react-hooks/exhaustive-deps
   44:8  warning  React Hook useCallback has a missing dependency: 'setSnack'. Either include it or remove the dependency array                   react-hooks/exhaustive-deps
   58:8  warning  React Hook useCallback has a missing dependency: 'setSnack'. Either include it or remove the dependency array                   react-hooks/exhaustive-deps
   77:8  warning  React Hook useCallback has missing dependencies: 'navigate' and 'setSnack'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
   96:8  warning  React Hook useCallback has missing dependencies: 'navigate' and 'setSnack'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
  112:8  warning  React Hook useCallback has a missing dependency: 'setSnack'. Either include it or remove the dependency array                   react-hooks/exhaustive-deps
  125:8  warning  React Hook useCallback has a missing dependency: 'setSnack'. Either include it or remove the dependency array                   react-hooks/exhaustive-deps
  141:8  warning  React Hook useCallback has missing dependencies: 'setSnack' and 'user'. Either include them or remove the dependency array      react-hooks/exhaustive-deps

cards-project\src\hooks\useForm.js
  71:8  warning  React Hook useCallback has a missing dependency: 'handleSubmit'. Either include it or remove the dependency array. If 'handleSubmit' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

cards-project\src\hooks\useUsers.js
  37:6   warning  React Hook useCallback has missing dependencies: 'navigate', 'setSnack', 'setToken', and 'setUser'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
  43:6   warning  React Hook useCallback has a missing dependency: 'setUser'. Either include it or remove the dependency array                                            react-hooks/exhaustive-deps
  58:6   warning  React Hook useCallback has missing dependencies: 'handleLogin' and 'setSnack'. Either include them or remove the dependency array                       react-hooks/exhaustive-deps
  76:6   warning  React Hook useCallback has a missing dependency: 'setSnack'. Either include it or remove the dependency array                                           react-hooks/exhaustive-deps
  78:28  warning  React Hook useCallback does nothing when called with only one argument. Did you forget to pass an array of dependencies?                                react-hooks/exhaustive-deps

cards-project\src\pages\AboutPage.jsx
  1:8   error  'React' is defined but never used         no-unused-vars
  2:15  error  'Divider' is defined but never used       no-unused-vars
  2:24  error  'List' is defined but never used          no-unused-vars
  2:30  error  'ListItem' is defined but never used      no-unused-vars
  2:40  error  'ListItemText' is defined but never used  no-unused-vars
  2:54  error  'Typography' is defined but never used    no-unused-vars
  4:10  error  'Link' is defined but never used          no-unused-vars
  5:10  error  'ROUTES' is defined but never used        no-unused-vars

cards-project\src\pages\AddCardPage.jsx
  1:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\pages\CardsDetailsPage.jsx
   1:8   error    'React' is defined but never used                                                                               no-unused-vars
   1:28  error    'useState' is defined but never used                                                                            no-unused-vars
   6:8   error    'PageHeader' is defined but never used                                                                          no-unused-vars
  25:6   warning  React Hook useEffect has a missing dependency: 'getCardById'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

cards-project\src\pages\CardsPage.jsx
   1:8   error    'React' is defined but never used                                                                               no-unused-vars
   7:10  error    'useCurrentUser' is defined but never used                                                                      no-unused-vars
  14:6   warning  React Hook useEffect has a missing dependency: 'getAllCards'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

cards-project\src\pages\EditCardPage.jsx
   2:8   error    'React' is defined but never used                                                                               no-unused-vars
   2:28  error    'useState' is defined but never used                                                                            no-unused-vars
  31:6   warning  React Hook useEffect has a missing dependency: 'getCardById'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

cards-project\src\pages\ErrorPage.jsx
  1:8  error  'React' is defined but never used       no-unused-vars
  2:8  error  'PageHeader' is defined but never used  no-unused-vars

cards-project\src\pages\FavouriteCards.jsx
   1:8  error    'React' is defined but never used                                                                               no-unused-vars
  17:6  warning  React Hook useEffect has a missing dependency: 'getFavCards'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

cards-project\src\pages\LoginPage.jsx
   1:8   error  'React' is defined but never used                                                                                                                                                           no-unused-vars
  15:11  error  'isLoading' is assigned a value but never used                                                                                                                                              no-unused-vars
  15:38  error  React Hook "useUsers" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?  react-hooks/rules-of-hooks
  17:79  error  React Hook "useForm" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?   react-hooks/rules-of-hooks

cards-project\src\pages\MyCards.jsx
   1:8  error    'React' is defined but never used                                                                              no-unused-vars
  17:6  warning  React Hook useEffect has a missing dependency: 'getMyCards'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

cards-project\src\pages\ProfilePage.jsx
   1:8  error    'React' is defined but never used                                                                                 no-unused-vars
  21:6  warning  React Hook useEffect has a missing dependency: 'handleGetUser'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

cards-project\src\pages\SandBoxPage.jsx
  1:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\pages\SignupPage.jsx
   1:8   error  'React' is defined but never used                                                                                                                                                           no-unused-vars
  15:30  error  React Hook "useUsers" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?  react-hooks/rules-of-hooks
  25:7   error  React Hook "useForm" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?   react-hooks/rules-of-hooks

cards-project\src\pages\layout\Layout.jsx
  1:8   error  'React' is defined but never used          no-unused-vars
  6:34  error  'children' is missing in props validation  react/prop-types

cards-project\src\pages\layout\footer\Footer.jsx
  2:8   error  'React' is defined but never used     no-unused-vars
  2:17  error  'useState' is defined but never used  no-unused-vars

cards-project\src\pages\layout\header\Header.jsx
  2:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\pages\layout\header\left-navigation\LeftNavBar.jsx
  2:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\pages\layout\header\logo\Logo.jsx
  1:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\pages\layout\header\logo\LogoIcon.jsx
  2:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\pages\layout\header\right-navigation\Logged.jsx
   2:8   error    'React' is defined but never used                                                                                 no-unused-vars
   2:17  error    'useCallback' is defined but never used                                                                           no-unused-vars
  34:22  error    'error' is defined but never used                                                                                 no-unused-vars
  42:8   warning  React Hook useEffect has a missing dependency: 'handleGetUser'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

cards-project\src\pages\layout\header\right-navigation\NotLogged.jsx
  2:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\pages\layout\header\right-navigation\RightNavBar.jsx
  2:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\pages\layout\header\right-navigation\SearchBar.jsx
  2:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\pages\layout\main\Main.jsx
   2:8   error  'React' is defined but never used          no-unused-vars
   5:32  error  'children' is missing in props validation  react/prop-types
  11:7   error  Duplicate key 'minHeight'                  no-dupe-keys

cards-project\src\providers\CustomThemeProvider.jsx
   2:8   error    'React' is defined but never used                                                                                               no-unused-vars
   6:47  error    'children' is missing in props validation                                                                                       react/prop-types
  21:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components

cards-project\src\providers\SnackbarProvider.jsx
   2:8   error    'React' is defined but never used                                                                                               no-unused-vars
  10:44  error    'children' is missing in props validation                                                                                       react/prop-types
  45:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components

cards-project\src\providers\UserProvider.jsx
   1:8   error    'React' is defined but never used                                                                                               no-unused-vars
   6:40  error    'children' is missing in props validation                                                                                       react/prop-types
  24:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components

cards-project\src\routes\Router.jsx
  2:8  error  'React' is defined but never used  no-unused-vars

cards-project\src\services\localStorageService.js
  14:14  error  'error' is defined but never used  no-unused-vars

✖ 325 problems (301 errors, 24 warnings)

[zspitz]

Another thought: if you store cards/my-cards in a context along with the handlers, it might save on the rendering of child components, because the handler props won't have changed.

[artvax0]

Another thought: if you store cards/my-cards in a context along with the handlers,

May I get a clearer picture of what you mean by this?

[zspitz]

You're currently getting the handlers from the useCards hook, which would recreate them every time it's called. (Side point: It shouldn't be happening, because the handlers are wrapped in useCallback within the hook.) As we see above, those handler props are (one of) the things triggering a re-render.

If you had a context that stored the current collection of cards (either all the cards, or only the cards owned by the current user), and accessed the handlers from the context, those handlers wouldn't trigger a re-render.

I didn't test this; it may not work.