Remover useEffect sempre que puder

[bruno3du]

import React, { useEffect, useState } from 'react'
import Slider from 'components/Slider'
import styles from './Movies.module.scss'
import apiMovie from 'assets/movies.json'

// essas api/mock são estaticos, neste caso podemos fazer o seguinte.

export default function Movie() {

  const [allMovies, setAllMovies] = useState([])
  const [movies, setMovies] = useState([])
  const [series, setSeries] = useState([])

  useEffect(() => {

   // invés de colocar todos eles ao montar, podemos chamar ele direto no useState.
    setAllMovies(apiMovie)
   // novamente como a api é fixa podemos filtra  o filme fora do componente e colocar direto nos useStates. Claro isso funciona nesses casos. E esses casos acontecem sim em casos de usos reais.
    const mov = apiMovie.filter(item => item.type === 'filme')
    setMovies(mov)
    const ser = apiMovie.filter(item => item.type === 'serie')
    setSeries(ser)
  }, [])

  return (
    <section className={styles.movies}>
      <h3>{`Todos os filmes >`}</h3>
      <h2>Mais Vistos</h2>
      <div className={styles.movies__categoria}>
      <Slider movies={allMovies} initial={200} link={true}/>
      </div>
      <h2>Filmes</h2>
      <div className={styles.movies__categoria}>
      <Slider movies={movies} initial={100} link={true}/>
      </div>
      <h2>Series</h2>
      <div className={styles.movies__categoria}>
      <Slider movies={series} initial={150} link={true}/>
      </div>
    </section>
  )
}

const mov = apiMovie.filter(item => item.type === 'filme')
const ser = apiMovie.filter(item => item.type === 'serie')

export default function Movie() {
  const [allMovies, setAllMovies] = useState(apiMovie)
  const [movies, setMovies] = useState(mov)
  const [series, setSeries] = useState(ser)

  return (
    <section className={styles.movies}>
      <h3>{`Todos os filmes >`}</h3>
      <h2>Mais Vistos</h2>
      <div className={styles.movies__categoria}>
      <Slider movies={allMovies} initial={200} link={true}/>
      </div>
      <h2>Filmes</h2>
      <div className={styles.movies__categoria}>
      <Slider movies={movies} initial={100} link={true}/>
      </div>
      <h2>Series</h2>
      <div className={styles.movies__categoria}>
      <Slider movies={series} initial={150} link={true}/>
      </div>
    </section>
  )
}

O maior beneficio é a gente não precisa mais do useEffect, sendo assim não chamamos o useState que iria realizar um novo rerender que é o que a gente sempre busca numa aplicação.

[BrunoRivolta]

Top, entendi perfeitamente