Using Babel to Improve React Performance and GraphQL Directives

In Improve React performance with Babel Olivier Tassinari walks us through the methods Babel uses to improve the performance of our applications.

Oliver is building upon his experience with different react projects, among them the wonderful Material-UI.

He starts with reviewing the usual methods of ensuring adequate performance:

• Setting process.env.node_env = ‘production’;
• Pruning the reconciliation tree;
• Responsible use of the key attribute.

Then he reviews several tricks that Babel brings to the table:

• Constant hoisting for React elementsl
• Inlining React elementsl
• Removing propTypes;

In the end he puts the methods he described to the test through a series of benchmarks.

In GraphQL Directives Abhi Aiyer reviews the GraphQL directives which can help simplify your GraphQL code and make changes to schema more manageable. He explains the use of the following two directives:

• @skip, that allows the exclusion of fields based on a condition.
• @include, which does the opposite — includes fields based on a condition.

He provides example of using the directives and also warns that they are currently not a priority in GraphQL development:

We’ve determined that user-supplied custom directives is a non-goal for graphql-js at this time. — Lee Byron