React template should create a typed React Functional Component

[virus2016]

Hi there,

We are having a productivity hit when creating components because of the template that is in the React create component:

nx/packages/react/src/schematics/component/files/__fileName__.tsx__tmpl__

Line 50 in 7037254

export function <%= className %>(props: <%= className %>Props) {

We would love to use ng generate component and for it to create the following:

interface I*NAME*Props {}

export const *NAME*: React.FC<I*NAME*Props> = (props) => {

...

}

Would this be accepted if a PR was made?

Cheers,

[bcheidemann]

Seconded! I would also love the option to provide my own custom template but I would settle for being able to reference props.children without having to manually adjust the interface every time I make a new component :P

[Szauka]

This would give easy access to props.children which in turn would speed up development.

[jaysoo]

I don't think we should generate with React.FC by default. Some issues are outlined here: https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/

And you could be more explicit about what components use children or not with { children: React.ReactNode } and { children?: never } in the props interface.

If your workspace follow different conventions you can always use a workspace generator: https://nx.dev/latest/react/generators/workspace-generators#creating-a-workspace-generator

For example:

nx g @nrwl/workspace:workspace-generator react-component

Then in tools/generators/react-component/index.ts do this:

import { Tree, formatFiles, installPackagesTask } from '@nrwl/devkit';
import { componentGenerator } from '@nrwl/react';
import { names, getProjects } from '@nrwl/devkit';

export default async function (host: Tree, schema: any) {
  const { className, fileName } = names(schema.name);
  const projects = getProjects(host);
  const project = projects.get(schema.project);

  await componentGenerator(host, {
    name: schema.name,
    project: schema.project,
    style: 'css',
  });

  host.write(
    `${project.root}/src/lib/${fileName}/${fileName}.tsx`,
    `
// use whatever template you want here!
// e.g.
import * as React from 'react';

interface I${className}Props {}

export const ${className}: React.FC<I${className}Props> = (props) => {
  return <div>{props.children}</div>;
}
  `
  );

  await formatFiles(host);

  return () => {
    installPackagesTask(host);
  };
}

Then you can run nx workspace-generator react-component my-component --project=my-project that will use the default component generator but overwrite the TSX file.

[jaysoo]

Since there is a workaround using workspace generator I'm going to close this issue. However if there are issues with this approach feel free to re-open and we can take another look. Cheers!

[alechill]

This misses a much more dangerous problem with the generated component (that the blog post referenced fails to address) which is that React can only handle certain output from components, and as an untyped function that infers types from its own implementation, this current generator does not enforce type safety with React itself, as the return type is not restricted to acceptable types (which it would be if specified using React.FC)

React.FC type exists for a reason and implicitly applying optional props is of the least importance, however ensuring the contract with React is critical

For example in the current template it would be possible to return an object literal, an array, a Date, any arbitrary class instance etc, which are not valid return types for a component and TS will not complain, however your code would blow up at runtime.

While someone who is knowledgeable of React can know this and avoid/debug easily, someone with no prior knowledge of React is not constrained by the types and can therefore very easily make mistakes that could have been avoided if adhering to official types.

A major benefit of scaffolding with types is to ensure convention, consistency, quality, and as a result speed (for those with and without experience) but this can only be done by applying the best type safety available, whereas at the moment this generator is eschewing the convention of typing with React.FC and in doing so is also disposing of the safety it ensures with React

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.