ReactJS

Hook 2: useEffect

Es una función que se ejecuta después de useState (ejecuta efectos secundarios).

useEffect( () => {}, [] )
/*            ^^     ^^
              |      └ deps: array de estados de los que depende
              └ effect: función a la que aplica
*/

Si la función es una llamada asíncrona,

const fetchComics = async() => {
	setComics( await api.allComics() )
}
useEffect( () => { fetchComics() }, [] )

useEffect(() => {
	async function fetchComics() {
	  setComics(await getCommonComics(firstSelectedChar, secondSelectedChar))
	  //        ^^^ es igual que:
	  //getCommonComics(...).then( data => {setComics(data)} );
	}
	fetchComics()
}, [firstSelectedChar, secondSelectedChar])

• Por defecto, los efectos se ejecutan después de cada renderizado completo, pero pueden ejecutarse solo cuando ciertos valores han cambiado (deps).
• El modelo mental para entenderlo es pensar con qué parte del estado estamos sincronizando este "efecto". No pensemos en cuándo se ejecuta.

Hay más Hooks adicionales, pero son variantes de los básicos: el Hook de estado y el de efecto.

Arquitectura hexagonal (avance)

• Dominio: tu negocio
• Infra: externo (ej: AWS)
• Servicio: coordina tu dominio con tu infra. También se conocen como "casos de uso"

Routing

ui/views/Root.jsx:

import { Route, Switch } from 'react-router-dom'
import { routes } from 'ui/routes'

export const Root = () => (
  <>
    <GlobalStyles />
    <Switch>
      <Route exact path={routes.COMICS} component={ComicsList} />
    </Switch>
  </>
)

ui/routes.js:

export const routes = {
  COMICS: '/'
}