React: estratégias para componentes escaláveis

React: estratégias para componentes escaláveis | Alura Cursos Online

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    fetch('/api/user')
      .then((res) => res.json())
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false));
  }, []);
  function handleSubmit(event) {
    event.preventDefault();
    // Lógica de validação e envio de formulário
  }
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <form onSubmit={handleSubmit}>
      <h1>{user.name}</h1>
      <input type="text" name="email" defaultValue={user.email} />
      <button type="submit">Update</button>
    </form>
  );
}

function useUser() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    fetch('/api/user')
      .then((res) => res.json())
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false));
  }, []);
  return { user, loading, error };
}

function UserProfile() {
  const { user, loading, error } = useUser();
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

function UserForm({ user }) {
  const { register, handleSubmit } = useForm({
    defaultValues: user,
  });
  const onSubmit = (data) => {
    console.log('Form submitted:', data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} type="email" />
      <button type="submit">Update</button>
    </form>
  );
}

function UserProfile() {
  const { user, loading, error } = useUser();
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <div>
      <h1>{user.name}</h1>
      <UserForm user={user} />
    </div>
  );
}

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

React: estratégias para componentes escaláveis

Vinicios Neves

Explore por tópico

O problema do componente “faz-tudo”

Estratégias para desacoplar responsabilidades

1. Encapsular lógica de dados em hooks customizados

2. Separar a lógica de formulários

Componentes que escalam

1. Foque em uma tarefa por componente

2. Encapsule lógicas repetitivas em hooks customizados

3. Prefira compor componentes menores

Por que isso importa?

Conclusão: um papo sobre simplicidade

Vinicios Neves

Inscreva-se em nossa Newsletter

Explore por tópico

O problema do componente “faz-tudo”

Estratégias para desacoplar responsabilidades

1. Encapsular lógica de dados em hooks customizados

2. Separar a lógica de formulários

Componentes que escalam

1. Foque em uma tarefa por componente

2. Encapsule lógicas repetitivas em hooks customizados

3. Prefira compor componentes menores

Por que isso importa?

Conclusão: um papo sobre simplicidade

Leia também