Módulo 9: Buenas Prácticas y Optimización

9.1 Rendimiento y Optimización

Identificación de cuellos de botella:

La optimización del rendimiento implica identificar las partes de tu aplicación que están ralentizando el rendimiento. Pueden ser operaciones costosas en cuanto a tiempo de ejecución o uso ineficiente del estado y actualizaciones del DOM.

Lazy loading de componentes:

import React, { lazy, Suspense } from 'react';

const ComponenteTardio = lazy(() => import('./ComponenteTardio'));

const App = () => (
  <div>
    <Suspense fallback=<div>Cargando...</div>>
      <ComponenteTardio />
    </Suspense>
  </div>
);

export default App;
  

Uso de React.memo y useMemo:

import React, { useMemo } from 'react';

const ComponenteMemo = ({ data }) => {
  const resultadoCostoso = useMemo(() => hacerCalculoCostoso(data), [data]);

  return <div>{resultadoCostoso}</div>;
};

export default React.memo(ComponenteMemo);
  

9.2 Pruebas Unitarias en React

Introducción a las pruebas con Jest y Enzyme:

Jest es un marco de pruebas unitarias para JavaScript, y Enzyme es una biblioteca que simplifica la prueba de componentes React. Juntos, permiten escribir pruebas unitarias efectivas y confiables para tus componentes.

Instalación y configuración básica de pruebas:

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]
  }
}
  

Testeo de componentes y funciones:

import React from 'react';
import { shallow } from 'enzyme';
import MiComponente from './MiComponente';

describe('Pruebas de MiComponente', () => {
  it('Renderiza correctamente', () => {
    const wrapper = shallow(<MiComponente />);
    expect(wrapper).toMatchSnapshot();
  });

  it('Realiza algo en respuesta a un evento', () => {
    const wrapper = shallow(<MiComponente />);
    wrapper.find('button').simulate('click');
    // Realizar expectativas aquí
  });
});
  

Las pruebas unitarias son esenciales para garantizar que los componentes y funciones en tu aplicación React funcionen como se espera. Te ayudarán a evitar errores y a mantener un alto nivel de calidad en tu código.