Galera como uso herança com functional components? E navegação com Setas?

[wilsongomes-swe]

Parecem duas dúvidas, mas é o mesmo contexto.

Meu cenário:
Preciso fazer uma aplicação que listará filmes em de maneira dinâmica, várias listas com vários formatos, e preciso implementar esse cara com navegação por setinhas do teclado.

Minha idéia é extender a classe Component do react em um componente que já tenha os métodos que preciso, que são basicamente saber quem é o elemento ao lado direito, quem é o elemento ao lado esquerdo, abaixo e acima, mas isso em várias listas, inclusive fazer esta navegação também no menu, o mesmo cursor vai da listagem para as opções do menu.

Porém como ultimamente uso bastante functional components, como vocês indicam fazer isso?

E na verdade como fariam a navegação assim? Gostaria de opiniões, e se conhecerem alguma lib que faça para indicar.

Muito obrigado.

[glauberm]

Dá uma lida nesse texto. Usar herança é uma má ideia no seu caso, o ideal é que você coloque essas lógicas que quer reutilizar em um outro componente React ou arquivo JS puro e importe onde precisar.

[ninetails]

Esse link que o @glauberm mandou da documentação oficial fala muito bem sobre a parte dos componentes funcionais...

Então, como eu disse em outra thread: React é uma lib que dá bastante liberdade para o dev. Se faz sentido vc usar herança, use classes; tal como galera que vem de Java usa bastante classes ainda com TypeScript pra fazer componentes

Mas ir pra funcional é outro paradigma. É pensar sempre que abstrações do tipo serão composições. Existem diversos patterns herdados de programação funcional pra utilizar, sendo um dos mais famosos o High Order Functions no React como High Order Components. Pensando que componente funcional é só a parte do render e que boa parte de dependências que o React tinha com as classes já foram portadas pra componentes funcionais. Outro exemplo de composição seria Custom Hooks.

Já pra parte de navegação, pensaria em algo do tipo dividir responsabilidades. Com o Flux isso ajuda bastante, seria como ter um "container" ("wrapper", qualquer nome que queira dar) que controle estados como em qual "slide" a pessoa estaria e deixar event listeners controlando eventos do teclado e que mude o estado e passe para "baixo" pros componentes visuais.

[wkrueger]

Tem várias formas de se atingir resultados similares. Provavelmente com um Higher Order Component você atinge resultado similar. Ao invés de dar override em X e Y, X e Y vêm como parâmetros da função "de cima". Mas realmente não sei te dizer o que é mais correto ou melhor.

[wilsongomes-swe]

Legal galera, muito obrigado, @ninetails a navegação que quero implementar é similar a navegação da netflix, vai ser por TV então não tem mouse... Obrigado a todos, e bom saber que fazer com herança não seria considerado errado, mas sim correto no paradigma POO, como sou, e minha equipe é C# .Net acredito que herança pode ser legal. Mas estamos revisando se vamos partir pro funcional ou pro POO...

Em relação a implementar uma navegação tipo netflix, mas que o meso cursor passe na lista de filmes, no menu, em vários componentes navegáveis na tela.

Alguém tem alguma dica quanto a esta implementação. como pensariam em fazer?