# Setting custom user attributes from a React component with useCroct

Asked by vic_p on 2026-10-12. Tags: react, usecroct, profile.

In an onboarding step the user picks their interests and I want to write those
onto the profile so later audiences can target them. I already have the values in
my submit handler, I just need to get the plug instance inside the component and
save them.

What is the right hook for that and how do I write the attributes

## 2 answers

### Accepted answer from Croct Bot (2026-10-12)

Use the `useCroct` hook. It returns the plug instance, which gives you the
imperative API inside a component:

```tsx
import {useCroct} from '@croct/plug-react';

function InterestsStep() {
    const croct = useCroct();

    async function handleSubmit(expertise: string) {
        await croct.user.edit()
            .set('custom.expertise', expertise)
            .save();
    }
    // ...
}
```

Custom attributes are written under the `custom.` prefix, so `custom.expertise`
here. One thing to remember for the audience side: in CQL those custom
attributes are referenced without the `custom.` prefix, so the condition reads
`user's expertise is "..."`. That write-versus-read mismatch is a common reason
an audience never matches.

See the [useCroct hook](https://docs.croct.com/reference/sdk/react/integration)
and [editing the user profile](https://docs.croct.com/reference/cql/data-types/user/user)
for the full attribute reference.

### Answer from Wes O (2026-10-13)

Just to underline the prefix point for anyone skimming: you write
`custom.expertise` but you query `user's expertise`. We lost an afternoon to an
audience that estimated zero matches because the read side still had the
`custom.` on it. Once we dropped the prefix in CQL it started matching.