1
resposta

(In) Utilidade prática do hook useRouteMatch

Saudações companheiros!

Fazendo uns testes ao fazer o curso pude notas que ao utilizar o Categoria.jsx dessa forma:

const Categoria = () => {
    const {id} = useParams();

    return(
        <>
        <div className="container">
            <h2 className="titulo-pagina">Pet Notícias</h2>
            <Categorias/>
            <ListaPosts url={`/posts?categoria=${id}`}/>
        </div>
        </>
    )
}

Ele já consegue renderizar somente os posts da categoria clicada, porque uma vez que o link da categoria já leva para url específica:

const Categorias = ()=>{
    const [categorias, setCategorias] = useState([])
    useEffect(()=>{
        busca(`/categorias`, setCategorias);
    }, [])

    return(
        <ul className="lista-categorias container flex">
            {categorias.map((categoria)=>(
            <Link to = {`/categoria/${categoria.id}`}>
                <button className={`lista-categorias__categoria lista-categorias__categoria--${categoria.id}`}>{categoria.id}</button>
            </Link>))}

        </ul>
    )
}

O hook de useEffect do Lista de Posts já está com o segundo parâmetro de se atualizar a cada mudança da url:

const ListaPosts = ({url}) => {
    const [posts, setPosts] = useState([])

    useEffect(()=>{
        busca(url, setPosts)
    }, [url])

    return(
        <section className="posts container">
            {posts.map(post=>(
                <Link to={`/posts/${post.id}`} className={`cartao-post cartao-post--${post.categoria}`} key= {post.id}>
                    <article key = {post.id}>
                        <h3 className="cartao-post__titulo">{post.title}</h3>
                        <p className="cartao-post_meta">{post.metadescription}</p>
                    </article>
                </Link>
            ))}
        </section>
    )
}

Sendo assim, gostaria de entender o porque que esse hook específico foi utilizado nessa explicação, foi apenas para mostrar que existe ou tem implicações práticas que eu ainda não consigo perceber? Insira aqui a descrição dessa imagem para ajudar na acessibilidade Obrigado a todos pelas ajudas nesse fórum :)

1 resposta

Oi Ricardo,

Parece que é para não renderizar tudo novamente somente a parte de posts.