Avoiding the use of useEffect

[UltraWelfare]

Since the avoidance of useEffect is becoming more and more common, I was wondering how we can avoid it in these two situations:

1. Updating a field when another changes
2. Doing an action when another changes

For example, I have a use-case where a user selects a customer from a select field. The select field only has the id's and the name's of the user. When the user selects a customer it's supposed to show a card with the customer full information.
What I've been doing is:

const customer = watch('customer');

useEffect(() => {
    if (customer) {
        // fetch customer from server and setState to some variable
    }
}, [customer]);

Similarly, for updating a field when another changes it's the same code as above with the only change being setValue or calling reset.

Is there any other way we can tackle this and avoiding using useEffect ?

[BrendanC23]

I'm using TanStack Query for data fetching, so this is how I might do it:

const customer = watch('customer');
const customerData = trpc.customers.useQuery({ customer }, { enabled: customer !== "" });

For updating a field when another changes, your best option is probably either to keep the useEffect or move the code into the onChange event handler.