Midiendo el performance de nuestra app y usando React.memo()

Para no tener que copiar la url y abrirla en el navegador colocar “–open” este comando abre automaticamente la app en el navegador por defecto

"serve:dev": "webpack --mode 'development' && npx serve dist -s --open"

Generé unos scripts adicionales que les pueden servir para poder controlar el iniciar el servidor (sin tener que hacer el build) y poder hacer el build en modo de producción.

Acá mi repositorio utilizando create-react app

"scripts": {
    "build": "webpack --mode 'development", // Genera un build en modo de producción
    "start:dev": "npx serve build -s", // Inicia un servidor de pruebas para el build generado
    "serve:dev": "npm run build && npm run start:dev" // Corre el build y el serve para no tener que correr más de un comando
}

Windows 10. A mí me funcionó con este script: (el -open me da error, como que no lo reconoce asi que no se lo puse)

"serve:dev": "webpack --mode=development && npx serve dist -s",

Usar React.memo es similar a lo que son PureComponents? Qué diferencia tienen?
Saludos! 😃

Por si les marca el siguiente error al ejecutar npm run server:dev:

[webpack-cli] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.mode should be one of these:
   "development" | "production" | "none"
   -> Enable production optimizations or development hints.

Se corrige quitando las comillas simples de la palabra development:

"serve:dev": "webpack --mode development && npx serve dist -s"

Para aquellos (como yo) que estén usando React v17 o superior, se removió la opción de ver los tiempos de renderizado de los componentes tal como se muestra en el video en el apartado de Timings de la pestaña Performance en Dev Tools, principalmente porque con aplicaciones grandes estas llamadas para definir los tiempos de carga podían desmejorar el rendimiento de la aplicación al sobrecargarla. Aquí pueden ver la nota.

Amigos, esta clase vale ORO
Cada segundo, desarrollar no es tan complejo, pero en el mundo real pensar en performance es INDISPENSABLE, y es algo de lo que suelen carecer los cursos allá afuera, no solo en Platzi, sino en cualquier otra plataforma.

GRANDE MIDUDEV

Muy bueno el uso de React.memo()
Sin embargo puede llegar a ser un arma de doble filo. Cuidao

Tengo un error al ejecutar ./node_modules/.bin/webpack --mode “development” en consola:
’.’ is not recognized as an internal or external command,
operable program or batch file.

Busque en stackoverflow pero hasta el momento no logro conseguir una respuesta, alguien sabe como solucionar?

Vengo del futuro
Si por alguna razon no pueden usar el React profilel de las dev tools
Aqui pueden consutlar la documentacion
Tienen que:

1. Instalar scheduler > a 0.10.0 y asegurarse tener [email protected]^16.6.0 como mínimo

npm i scheduler -D	

1. Agregar esto a su webpack.config.js

module.exports = {
  // ...
  resolve: {
    // ...
    alias: {
      // ...
      'react-dom$': 'react-dom/profiling',
      'scheduler/tracing': 'scheduler/tracing-profiling',
    },
    // ...
  },
  // ...
};

1. Tienen que agregar –profile a su script de devlopment
   Ejemplo:

"serve:dev": "webpack --profile --mode development && npx serve dist -s",

no se reproduce el video, ni el siguiente 😦

Dejo un script de npm para desplegar la build de produccion en modo desarrollador, levantar el servidor en local y desplegarla como app statica, todo en un comando (npm run start) igual que nos ha enseñado el profe.

• instalar concurrently desde npm (es para lanzar a la vez el servidor y cliente)
• agregar como scripts de package.json

"build": "webpack ./src/index.js --mode='development'",
"serve": "npm run build && npx serve dist -s",
"dev:server": "node ./api",
"start": "concurrently --kill-others \"npm run dev:server\" \"npm run serve\"",

Al ejecutar npx serve dist -s me tira este error

Error: EPERM: operation not permitted, mkdir 'C:\Users\Marino'
TypeError: Cannot read property 'get' of undefined
    at errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205:18)
    at C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js:78:20
    at cb (C:\Program Files\nodejs\node_modules\npm\lib\npm.js:228:22)
    at C:\Program Files\nodejs\node_modules\npm\lib\npm.js:266:24
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:83:7
    at Array.forEach (<anonymous>)
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:82:13
    at f (C:\Program Files\nodejs\node_modules\npm\node_modules\once\once.js:25:25)
    at afterExtras (C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:173:20)
    at C:\Program Files\nodejs\node_modules\npm\node_modules\mkdirp\index.js:47:53
C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205
  if (npm.config.get('json')) {
                 ^

TypeError: Cannot read property 'get' of undefined
    at process.errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205:18)
    at process.emit (events.js:189:13)
    at process._fatalException (internal/bootstrap/node.js:494:27)
La instalación de [email protected] fracasó con código 7

Ejemplo:

// mi-archivo.js
{/…/}

export default Home = React.memo(HomePage)

no me esta cambiando las categorias… y mi código está bien; que será?
Mi codigo:

import React from 'react'
import { ListOfCategories } from '../components/ListOfCategories'
import { ListOfPhotoCards } from '../container/ListOfPhotoCards'
import { Layout } from '../components/Layout'

const HomePage = ({ categoryId }) => {
  return (
    <Layout title='Tu app de fotos de mascotas' subtitle='Con Petgram puedes encontrar fotos de animales domésticos muy bonitos'>
      <ListOfCategories />
      <ListOfPhotoCards categoryId={categoryId} />
    </Layout>
  )
}

export const Home = React.memo(HomePage, (prevProps, props) => {
  return prevProps.categoryId === props.categoryId
})

Mi consola:

evTools failed to parse SourceMap: webpack:///node_modules/apollo-boost/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-client/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-utilities/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/ts-invariant/lib/invariant.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/@wry/equality/lib/equality.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-link/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/zen-observable-ts/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-cache-inmemory/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-cache/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/optimism/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/@wry/context/lib/context.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-link-http/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-link-http-common/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-link-error/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/@apollo/react-hooks/lib/react-hooks.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/@apollo/react-common/lib/react-common.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/styled-components/dist/styled-components.browser.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/stylis/stylis.min.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/react-apollo/lib/react-apollo.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/@apollo/react-components/lib/react-components.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/@apollo/react-hoc/lib/react-hoc.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/@apollo/react-ssr/lib/react-ssr.esm.js.map
react-dom.development.js:12357 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: SideEffect(NullComponent)
printWarning @ react-dom.development.js:12357
lowPriorityWarningWithoutStack @ react-dom.development.js:12378
ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:12542
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:25689
commitRootImpl @ react-dom.development.js:24937
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
commitRoot @ react-dom.development.js:24922
finishSyncRender @ react-dom.development.js:24329
performSyncWorkOnRoot @ react-dom.development.js:24307
scheduleUpdateOnFiber @ react-dom.development.js:23698
updateContainer @ react-dom.development.js:27103
eval @ react-dom.development.js:27528
unbatchedUpdates @ react-dom.development.js:24433
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527
render @ react-dom.development.js:27608
eval @ index.js:36
./src/index.js @ app.bundle.js:1736
__webpack_require__ @ app.bundle.js:64
(anonymous) @ app.bundle.js:199
(anonymous) @ app.bundle.js:202
jquery-migrate-3.0.0.min.js:2 JQMIGRATE: Migrate is installed, version 3.0.0
2localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received.
Launcher.js:3 *** *** *** request_settings
3Launcher.js:20 launching FocusManager.parse_for_input on DOM mutation event

¡Los componentes solo harán render si sus props han cambiado! Normalmente, todos los componentes de React en nuestro árbol pasarán por un render cuando se realicen cambios. Con PureComponent y React.memo(), podemos tener solo algunos componentes renderizados.

,

Excelentee gracias!!