Responsividade em "Composition Pattern"

Bom dia, Boa tarde, Boa noite.

Estou seguindo meus estudos e tal, e recentemente comecei a desbravar "patterns" com foco maior em react/next!

E me surgiu uma indagação!

🔸Como ficaria a responsividade de um componente que segue esse tipo de pattern caso a situação for a seguinte:

-Um Header que possui uma Logo.

-So que essa logo tem 2 variaveis de Imagem, uma para resoluções maiorires ( mostra a logo com nome e tudo ), e uma para resoluções menores ( mostra apenas o icon ).

🔸Qual o ideal para uma responsividade nesse caso?

1-Usar useRef pra ver a largura do component e fazer uma condicional simples?

2-Usar apenas javascript do tipo "window.innerWidth <= 700" e "window.innerWidth >= 700".

3-Usar libs com hooks especificos, como : "react-resize-observer-hook" ou "useMediaQuery" do usehooks-ts, entre outros por ai...

4-Libs mais simples como : "React-Responsive"

5-Fazer 2 components repetidos, cada 1 com a respectiva imagem e fazer uma responsividade com css do tipo: "media tal display none em um deles"

6-Se n acha nenhum dos exemplos acima viáveis, aceito qualquer sugestão de dica,video,doc...

🔸OBS: sou novo na área gente, peguem leve comigo viu!!!!