Sheet1
name
bind
bnd
cctx
cdc
cdm
cdup
con
conc
cref
cwm
cwr
cwun
cwup
disp
est
fcc
fcc
fsc
fsf
Page 1
Sheet1
gdsfp
gsbu
hoc
hoc
props
pt
pta
pta
ptao
ptaor
ptar
ptb
ptbr
pte
ptel
ptelr
pter
ptet
ptetr
ptf
ptfr
pti
ptir
Page 2
Sheet1
ptn
ptnd
ptndr
ptnr
pto
ptoo
ptoor
ptoos
ptoosr
ptor
pts
ptsh
ptsh
ptshr
ptsr
rcc
rccp
rcfc
rcjc
rdp
rdp
ren
rpc
Page 3
Sheet1
rpt
rpt
rrc
rrc
rrdc
rsc
rscp
rsf
rsf
rsfp
rsfp
rsi
rwwd
scu
scu
ssf
sst
state
useCallb
ack
Page 4
Sheet1
useCallb
ack
useConte
xt
useConte
xt
useDebu
gValue
useEffect
useEffect
useImper
ativeHan
dle
useImper
ativeHan
dle
useImper
ativeHan
dle
useLayo
utEffect
useLayo
utEffect
useMem
o
useMem
o
Page 5
Sheet1
useRedu
cer
useRedu
cer
useRedu
cer
useRef
useRef
useState
useState
useState
Page 6
Sheet1
description
Binds the this of a method. To be used inside a constructor
Binds the this of a method. To be used inside a constructor
Creates a context
Error boundaries catch errors during rendering, in lifecycle
methods, and in constructors of the whole tree below them.
Invoked once, only on the client (not on the server), immediately
after the initial rendering occurs.
Invoked immediately after the component's updates are flushed to
the DOM.
Adds a default constructor for the class that contains props as
arguments
Adds a default constructor for the class that contains props and
context as arguments
Creates a ref
Invoked once, both on the client and server, immediately before
the initial rendering occurs
Invoked when a component is receiving new props. This method
is not called for the initial render.
Invoked immediately before a component is unmounted from the
DOM.
Invoked immediately before rendering when new props or state
are being received.
Adds the redux mapDispatchToProps function
Creates empty state object. To be used in a constructor.
Creates a React component class with FlowTypes
Creates a React component class with FlowTypes
Creates a stateless React component with FlowTypes and ES6
module system
Creates a stateless React component as a named function with
FlowTypes
Page 7
Sheet1
Invoked after a component is instantiated as well as when it
receives new props.
Invoked right before the most recently rendered output is
committed to e.g. the DOM. It enables your component to capture
current values
Creates a React higher-order component
Creates a React higher-order component
Access component's props
Creates empty propTypes declaration
Array prop type
Array prop type
An array of a certain type
An array of a certain type required
Array prop type required
Bool prop type
Bool prop type required
Prop type limited to specific values by treating it as an enum
React element prop type
React element prop type required
Prop type limited to specific values by treating it as an enum
required
An object that could be one of many types
An object that could be one of many types required
Func prop type
Func prop type required
Is an instance of a class prop type
Is an instance of a class prop type required
Page 8
Sheet1
Number prop type
Anything that can be rendered: numbers, strings, elements or an
array
Anything that can be rendered: numbers, strings, elements or an
array required
Number prop type required
Object prop type
An object with property values of a certain type
An object with property values of a certain type required
An object whose keys are known ahead of time
An object whose keys are known ahead of time required
Object prop type required
String prop type
An object taking on a particular shape
An object taking on a particular shape
An object taking on a particular shape required
String prop type required
Creates a A higher-order component
Creates a React component class with PropTypes and ES6
module system
Creates a React component class with PropTypes and all
lifecycle methods and ES6 module system
Creates a React component class with ES6 module system
Creates empty defaultProps declaration
Creates empty defaultProps declaration
When called, it should examine this.props and this.state and
return a single child element.
Creates a React pure component class with PropTypes and ES6
module system
Page 9
Sheet1
Creates empty propTypes declaration
Creates empty propTypes declaration
Creates a React component class connected to redux
Creates a React component class connected to redux
Creates a React component class connected to redux with
dispatch
Creates a stateless React component without PropTypes and
ES6 module system
Creates a stateless React component with PropTypes and ES6
module system
Creates a stateless React component as a named function
without PropTypes
Creates a stateless React component as a named function
without PropTypes
Creates a stateless React component as a named function with
PropTypes
Creates a stateless React component as a named function with
PropTypes
Creates a stateless React component without PropTypes and
ES6 module system but with Implicit Return and props
Creates a React component class with constructor, empty state,
proptypes and export in ES6 module system without imports.
(Mostly used when React, Proptypes are provided by webpack
provide plugin)
Invoked before rendering when new props or state are being
received.
Invoked before rendering when new props or state are being
received.
Performs a shallow merge of nextState into current state
Performs a shallow merge of nextState into current state
Access component's state
useCallback
Page 10
Sheet1
useCallback
useContext
useContext
useDebugValue
useEffect
useEffect
useImperativeHandle
useImperativeHandle
useImperativeHandle
useLayoutEffect
useLayoutEffect
useMemo
useMemo
Page 11
Sheet1
useReducer
useReducer
useReducer
useRef
useRef
useState
useState
useState
Page 12
Sheet1
value
this.$FUNC$ = this.$FUNC$.bind(this);$END$
this.$1$ = this.$1$.bind(this);$END$
const $contextName$ = React.createContext();$END$
componentDidCatch(error, info) { $END$}
componentDidMount() {
$END$}
componentDidUpdate(prevProps, prevState) {
constructor(props) {
super(props);
constructor(props, context) {
$END$}
$END$}
super(props, context);
$END$}
this.$refName$Ref = React.createRef();$END$
componentWillMount() {
$END$}
componentWillReceiveProps(nextProps) {
componentWillUnmount() {
$END$}
$END$}
componentWillUpdate(nextProps, nextState) {
$END$}
function mapDispatchToProps(dispatch) { return { }}
this.state = { $1$};
// @flowimport * as React from 'react';type Props = { $END$};type State = { $1$};export class $TM_FILENAME_BASE$ ex
// @flowimport * as React from 'react';type Props = { $END$};type State = { $1$};export class $TM_FILENAME_BASE$ ex
// @flow import * as React from 'react';type Props = { $END$};export const $TM_FILENAME_BASE$ = (props: Props) => {
// @flowimport * as React from 'react';type Props = { $END$};export function $TM_FILENAME_BASE$(props: Props) { ret
Page 13
Sheet1
static getDerivedStateFromProps(nextProps, prevState) { $END$}
getSnapshotBeforeUpdate(prevProps, prevState) { $END$}
import React from 'react'import PropTypes from 'prop-types'export default ($WrappedComponent$) => { const $hocComp
import React from 'react'import PropTypes from 'prop-types'export default ($WrappedComponent$) => { const $hocComp
this.props.$END$
$componentName$.propTypes = {
$END$};
PropTypes.array,
PropTypes.array,
PropTypes.arrayOf($END$),
PropTypes.arrayOf($END$).isRequired,
PropTypes.array.isRequired,
PropTypes.bool,
PropTypes.bool.isRequired,
PropTypes.oneOf(['$END$']),
PropTypes.element,
PropTypes.element.isRequired,
PropTypes.oneOf(['$END$']).isRequired,
PropTypes.oneOfType([
$END$]),
PropTypes.oneOfType([
$END$]).isRequired,
PropTypes.func,
PropTypes.func.isRequired,
PropTypes.instanceOf($END$),
PropTypes.instanceOf($0).isRequired,
Page 14
Sheet1
PropTypes.number,
PropTypes.node,
PropTypes.node.isRequired,
PropTypes.number.isRequired,
PropTypes.object,
PropTypes.objectOf($END$),
PropTypes.objectOf($END$).isRequired,
PropTypes.objectOf(PropTypes.shape($END$)),
PropTypes.objectOf(PropTypes.shape($END$)).isRequired,
PropTypes.object.isRequired,
PropTypes.string,
PropTypes.shape({
$END$}),
PropTypes.shape({
$END$}),
PropTypes.shape({
$END$}).isRequired,
PropTypes.string.isRequired,
import React, { Component } from 'react';class $TM_FILENAME_BASE$ extends Component { render() { return ( <div>
import React, { Component } from 'react';import PropTypes from 'prop-types';class $componentName$ extends Componen
import React, { Component } from 'react';import PropTypes from 'prop-types';class $componentName$ extends Componen
class $TM_FILENAME_BASE$ extends Component { render() { return ( <div>
$END$ </div> ); }}
$1$.defaultProps = { $2$};
$1$.defaultProps = { $2$};
render() {
return (
<div>
$END$
</div>
);}
import React, { PureComponent } from 'react';import PropTypes from 'prop-types';class $TM_FILENAME_BASE$ extends
Page 15
Sheet1
$1$.propTypes = { $2$};
$1$.propTypes = { $2$};
import React, { Component } from 'react';import { connect } from 'react-redux'; class $componentName$ extends Compon
import React, { Component } from 'react';import { connect } from 'react-redux'; class $componentName$ extends Compon
import React, { Component } from 'react';import { connect } from 'react-redux';function mapStateToProps(state) { return { };
import React from 'react';const $componentName$ = () => {
return (
<div>
$END$
import React from 'react';import PropTypes from 'prop-types';const $componentName$ = props => {
</div>
);};export defa
return (
<div>
import React from 'react';function $TM_FILENAME_BASE$(props) { return ( $1$ );}export default $TM_FILENAME_BASE
import React from 'react';function $TM_FILENAME_BASE$(props) { return ( $1$ );}export default $TM_FILENAME_BASE
import React from 'react';import PropTypes from 'prop-types';$TM_FILENAME_BASE$.propTypes = { $END$};function $T
import React from 'react';import PropTypes from 'prop-types';$TM_FILENAME_BASE$.propTypes = { $END$};function $T
import React from 'react';const $TM_FILENAME_BASE$ = (props) => ( $END$);export default $TM_FILENAME_BASE$;
class $TM_FILENAME_BASE$ extends React.Component { constructor(props) { super(props); this.state = {}; } render() {
shouldComponentUpdate(nextProps, nextState) {
$END$}
shouldComponentUpdate(nextProps, nextState) {
$END$}
this.setState((state, props) => {
return {
$END$
};});
this.setState($END$);
this.state.$END$
useCallback( () => {
$callback$ }, [$input$],);$END$
Page 16
Sheet1
useCallback( () => {
$callback$ }, [$input$],);$END$
const $context$ = useContext($contextValue$);$END$
const $context$ = useContext($contextValue$);$END$
useDebugValue($value$);$END$
useEffect(() => { return () => {
$effect$ };}, [$input$]);$END$
useEffect(() => { return () => {
$effect$ };}, [$input$]);$END$
useImperativeHandle( $ref$, () => {
$handler$ }, [$input$],);$END$
useImperativeHandle( $ref$, () => {
$handler$ }, [$input$],);$END$
useImperativeHandle( $ref$, () => {
$handler$ }, [$input$],);$END$
useLayoutEffect(() => { return () => {
$effect$ }, [$input$]});$END$
useLayoutEffect(() => { return () => {
$effect$ }, [$input$]});$END$
useMemo(() => $function$, $input$);$END$
useMemo(() => $function$, $input$);$END$
Page 17
Sheet1
const [state, dispatch] = useReducer($reducer$, $initialState$, $init$);$END$
const [state, dispatch] = useReducer($reducer$, $initialState$, $init$);$END$
const [state, dispatch] = useReducer($reducer$, $initialState$, $init$);$END$
const $ref$ = useRef($initialValue$);$END$
const $ref$ = useRef($initialValue$);$END$
const [$state$, set$setState$] = useState($initState$);$END$
const [$state$, set$setState$] = useState($initState$);$END$
const [$state$, set$setState$] = useState($initState$);$END$
Page 18
Sheet1
toReformat toShortenFQNames variable name
TRUE
TRUE
FUNC
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
1
TRUE
TRUE
1
1
1
TM_FILENAME_BASE
TRUE
TRUE
TM_FILENAME_BASE
TRUE
TRUE
TM_FILENAME_BASE
1
contextName
refName
Page 19
Sheet1
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
1
1
TRUE
TRUE
FALSE
TRUE
FALSE
TRUE
0
1
FALSE
TRUE
FALSE
TRUE
FALSE
TRUE
FALSE
TRUE
FALSE
TRUE
TRUE
TRUE
FALSE
TRUE
FALSE
TRUE
TRUE
TRUE
FALSE
TRUE
FALSE
TRUE
FALSE
TRUE
FALSE
TRUE
FALSE
TRUE
FALSE
TRUE
WrappedComponent
hocComponent
componentName
Page 20
Sheet1
FALSE
TRUE
FALSE
TRUE
FALSE
TRUE
FALSE
TRUE
FALSE
TRUE
FALSE
TRUE
FALSE
TRUE
TRUE
TRUE
TRUE
TRUE
FALSE
TRUE
FALSE
TRUE
FALSE
TRUE
0
1
FALSE
TRUE
FALSE
TRUE
TRUE
TRUE
TM_FILENAME_BASE
TRUE
TRUE
componentName
TRUE
TRUE
componentName
TRUE
TRUE
TM_FILENAME_BASE
TRUE
TRUE
1
1
1
2
TRUE
TRUE
TRUE
TRUE
TM_FILENAME_BASE
Page 21
Sheet1
TRUE
TRUE
1
1
1
2
TRUE
TRUE
1
1
TRUE
TRUE
TM_FILENAME_BASE
TRUE
TRUE
componentName
TRUE
TRUE
componentName
TRUE
TRUE
1
1
TRUE
TRUE
1
1
TM_FILENAME_BASE
TRUE
TRUE
TM_FILENAME_BASE
TRUE
TRUE
TM_FILENAME_BASE
TRUE
TRUE
1
1
FALSE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
componentName
1
TM_FILENAME_BASE
1
callback
Page 22
Sheet1
1
1
input
TRUE
TRUE
1
1
TRUE
TRUE
value
TRUE
TRUE
effect
1
1
input
TRUE
TRUE
1
1
handler
1
1
input
TRUE
TRUE
effect
1
1
input
TRUE
TRUE
1
1
context
contextValue
ref
function
input
Page 23
Sheet1
TRUE
TRUE
reducer
1
1
initialState
1
1
init
TRUE
TRUE
ref
1
1
TRUE
TRUE
1
1
setState
1
1
initState
initialValue
state
Page 24
Sheet1
expression
defaultValue
alwaysStopAt option
"handleChange"
TRUE
""
TRUE
"contextName"
TRUE
"refName"
TRUE
""
TRUE
""
TRUE
capitalize(camelCase(fileNameWithoutExtension()))
""
TRUE
capitalize(camelCase(fileNameWithoutExtension()))
""
TRUE
capitalize(camelCase(fileNameWithoutExtension()))
""
TRUE
Page 25
Sheet1
"WrappedComponent"
TRUE
"hocComponent"
TRUE
"MyComponent"
TRUE
Page 26
Sheet1
capitalize(camelCase(fileNameWithoutExtension()))
capitalize(camelCase(fileNameWithoutExtension()))
capitalize(camelCase(fileNameWithoutExtension()))
""
TRUE
"MyComponent"
TRUE
"MyComponent"
TRUE
""
TRUE
""
TRUE
""
TRUE
""
TRUE
Page 27
Sheet1
capitalize(camelCase(fileNameWithoutExtension()))
""
TRUE
""
TRUE
"MyComponent"
TRUE
""
TRUE
"MyComponent"
TRUE
"MyComponent"
TRUE
"<div></div>"
TRUE
""
TRUE
"<div></div>"
TRUE
capitalize(camelCase(fileNameWithoutExtension()))
""
TRUE
capitalize(camelCase(fileNameWithoutExtension()))
""
TRUE
capitalize(camelCase(fileNameWithoutExtension()))
""
TRUE
"callback"
TRUE
capitalize(camelCase(fileNameWithoutExtension()))
capitalize(camelCase(fileNameWithoutExtension()))
Page 28
Sheet1
"input"
TRUE
"context"
TRUE
"contextValue"
TRUE
"value"
TRUE
"effect"
TRUE
"input"
TRUE
"ref"
TRUE
"handler"
TRUE
"input"
TRUE
"effect"
TRUE
"input"
TRUE
"function"
TRUE
"input"
TRUE
Page 29
Sheet1
"reducer"
TRUE
"initialState"
TRUE
"init"
TRUE
"ref"
TRUE
"initialValue"
TRUE
"state"
TRUE
capitalize(state)
TRUE
"initState"
Page 30
TRUE
Sheet1
name
value
Page 31
Sheet1
JS_EXPRESSION
FALSE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
Page 32
Sheet1
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_STATEMENT
TRUE
JS_EXPRESSION
FALSE
TS_EXPRESSION
TRUE
Page 33
Sheet1
TypeScript
TRUE
JS_EXPRESSION
TRUE
JS_STATEMENT
TRUE
Page 34