The csf-2-to-3 codemod would use render: () => { ... } instead of args.children. What's the difference? Seems like it allows you to specify the props type inline when passing it to render:

export const Default: StoryObj< typeof Menu > = {
	render: ( props: MenuProps ) => (
		<Menu { ...props }>
			/// ...
		</Menu>
	),

	args: {},
};

One difference to note is that the codemod uses render: but also specifically adds this to all stories that inherit from Default:

	args: {
		...Default.args,
	},

When I was working on some of the TypeScript compilation hotspots, I noticed that not having a render function is better for performance, since it can bypass a lot of work. So we should avoid render and prefer children when possible.

As Lena points out, the reason why I used children at the beginning was because I thought it'd be more idiomatic / more performant.

This makes sense to me 👍

However, how do we maintain it as other people work on stories and introduce CSF3 ones? Should we add some docs or introduce linting? Any better ideas?

We could document it, and we usually point it out in code review, but that's about as far as I think it needs to be "enforced". No biggie.

This was already a thing in CSF2, where some people would write completely new templates instead of just changing args.children.

From what I know, using args over custom "render" function has always been a best practice, even prior to CSF3.

In case it helps, Storybook docs also point out that using args is preferred: https://storybook.js.org/docs/8.5/writing-stories#working-with-react-hooks:~:text=We%20recommend%20args%20as%20much%20as%20possible%20when%20writing%20your%20own%20stories.

Not sure if we should spend time writing docs or lining Storybook files?