Quando usar .JS ou .JSX

.jsx é desnecessário, essa extensão surgiu depois de argumentarem que "JavaScript precisa de variações para melhor 'padrão'".

TypeScript = TS

JavaScript = JS

JavaScript + HTML Like = JSX ou TSX

Mas é indiferente, só faz sentido para o TypeScript.

Algumas pessoas argumentam dizendo que isso é JSX:

const App = () => {
    return <p>Olá mundo!</p>
}

e isso é JS:

const App = () => {
  return React.createElement("p", null, "Olá mundo!")
}

Porém, isso é falso, o primeiro caso pode ser perfeitamente usado em arquivos JS e vice versa, leia na documentação do React:

O React não requer o uso do JSX. Porém, a maioria das pessoas acha prático como uma ajuda visual quando se está trabalhando com uma UI dentro do código em JavaScript. Ele permite ao React mostrar mensagens mais úteis de erro e aviso.

https://pt-br.reactjs.org/docs/introducing-jsx.html#gatsby-focus-wrapper

Porém mesmo essa situação de destacada na documentação é algo passivo de correção, já que a representação de mensagens de erros e de debugger depende muito das extensões e do editor/ide que você está usando.