[Question] Stateful shared component

[RayLuxembourg]

I have a component that is reused across the application but it has a different state for each of its parents.
Am i allowed to this? (currently working)

type Props = {
  branchState: RecoilState<string>;
};

export default function Branches({ branchState }: Props) {
  const [selectedBranch, selectBranch] = useRecoilState(branchState);
  ...
}

Would love your opinion.

[davidmccabe]

If I understand correctly, the question is whether you can pass an atom in as a prop. If so, yes, this is a great way to do things.

[drarmstr]

@davidmccabe, we should probably add this as a pattern in the docs somewhere.. Ideas on a good place for it?

[RayLuxembourg]

If this doesnt cause unnecessary renders then, this is one of the best code reusability features.
This opened up big doors for me.

[drarmstr]

Something else I'll do occasionally is make the prop optional and have the component define it's own internal atom. That way users of the component don't need to provide one if it's isolated. But, if they want to sync state with something else, then they can provide an atom override.

[RayLuxembourg]

Something else I'll do occasionally is make the prop optional and have the component define it's own internal atom. That way users of the component don't need to provide one if it's isolated. But, if they want to sync state with something else, then they can provide an atom override.

Ye its all depend on the use case. If u are ok about sharing the state in different routes/view s then it's great. For example in my case, branches has an async selector to get list of branches from server and has the current selected branch as an atom.
The current selected is what i want to not be shared so each view has different state but the api call for branches is common so only 1 request is ever sent.