Duvida ( talvez básica de React)

[Kaedh]

Pessoal estou desenvolvendo um projetinho pessoal aqui usando React, e estou com um problema.
O projeto consiste em um site que mostra uma lista de clientes cadastrados no lado esquerdo e o formulário preenchido com os dados destes clientes cadastrados no lado direito.
Eu queria que assim que o site fizesse o primeiro render um state chamado customers fosse preenchido com um JSON(estou usando uma variável com os dados pra simula-los primeiro) e depois que esse state fosse setado outro state chamado selectedCustomerId fosse setado como sendo o primeiro elemento dessa lista de clientes.

   
   const [ customers, setCustomers] = useState([]);
   const [ selectedCustomerId, setSelectedCustomerId] = useState();
  
  //Quando o app inicia carrega os dados
  useEffect(() => setCustomers(data), [])

  //Inicialmente seta o cliente selecionado como sendo o primeiro da lista
  useEffect(() => setSelectedCustomerId(customers[0].id), [customers])

Percebi que após o primeiro render como o customers é igual a [] o customers[0].id dá undefined e clasha o site, teria alguma forma de fazer como se fosse um passo a passo? primeiro seta os clientes e depois disso seta o cliente selecionado?
Posso ter entendi errado como funciona o useEffect ou minha lógica está ruim também.
Enfim desculpa se a dúvida for muito boba mas pesquisei bastante sobre formas de fazer isso e tudo está muito confuso pra mim ainda. Qualquer dica é bem vinda :p.

[lddv]

Bom dia, xará @Kaedh. Você pode evitar o erro ao fazer:

//Inicialmente seta o cliente selecionado como sendo o primeiro da lista
useEffect(() => {
  if (customers) setSelectedCustomerId(customers[0].id)
}, [customers])

Existe ainda a opção de colocar um optional chaining pra verificar se o customers está vazio.

Outra opção também é controlar diretamente o carregamento dos dados no primeiro useEffect. Algo como:

//Quando o app inicia carrega os dados
  useEffect(() => {
    if (customers.length === 0) setCustomers(data)
  }, [customers])

Espero que tenha ajudado.

[ninetails]

Talvez o problema seja mais conceitual. Pense assim: na primeira vez que você renderizar, você ainda não chamou a API. Com isso você ainda não tem os dados pra exibir e também não deveria dar erro por isso.

Pois mesmo com useEffect, sua API só vai ser chamada após a execução da primeira renderização (é assim que o React funciona).

Geralmente tem-se duas alternativas a esta solução:

1. criar um outro estado "loading" dando um feedback usuário que vc ainda está pegando os dados e talvez nisso renderizar um dummy ao invés da listagem (tipo facebook quando ainda não carregou o feed);
2. Ou usar Suspense (que também tem como renderizar esse dummy) e aguardar que a chamada seja feita. Mas a implementação pode ser um pouco penosa pra quem tá começando. Talvez deva ter algo mais fácil se pesquisar direto algo como Suspense + React Query...