diff --git a/docs/rules/function-component-definition.md b/docs/rules/function-component-definition.md
index b869373d20..9c798d17e4 100644
--- a/docs/rules/function-component-definition.md
+++ b/docs/rules/function-component-definition.md
@@ -12,12 +12,12 @@ Examples of **incorrect** code for this rule:
```jsx
// function expression for named component
-var Component = function (props) {
+const Component = function (props) {
return
{props.content}
;
};
// arrow function for named component
-var Component = (props) => {
+const Component = (props) => {
return {props.content}
;
};
@@ -49,11 +49,11 @@ Examples of **incorrect** code for this rule:
```jsx
// only function declarations for named components
// [2, { "namedComponents": "function-declaration" }]
-var Component = function (props) {
+const Component = function (props) {
return ;
};
-var Component = (props) => {
+const Component = (props) => {
return ;
};
@@ -63,7 +63,7 @@ function Component (props) {
return ;
};
-var Component = (props) => {
+const Component = (props) => {
return ;
};
@@ -73,7 +73,7 @@ function Component (props) {
return ;
};
-var Component = function (props) {
+const Component = function (props) {
return ;
};
@@ -107,13 +107,13 @@ function Component (props) {
// only function expressions for named components
// [2, { "namedComponents": "function-expression" }]
-var Component = function (props) {
+const Component = function (props) {
return ;
};
// only arrow functions for named components
// [2, { "namedComponents": "arrow-function" }]
-var Component = (props) => {
+const Component = (props) => {
return ;
};
@@ -170,11 +170,11 @@ The following patterns can **not** be autofixed in TypeScript:
```tsx
// function expressions and arrow functions that have type annotations cannot be autofixed to function declarations
// [2, { "namedComponents": "function-declaration" }]
-var Component: React.FC = function (props) {
+const Component: React.FC = function (props) {
return ;
};
-var Component: React.FC = (props) => {
+const Component: React.FC = (props) => {
return ;
};
@@ -184,7 +184,7 @@ function Component(props: Props) {
return ;
};
-var Component = function (props: Props) {
+const Component = function (props: Props) {
return ;
};
@@ -203,13 +203,13 @@ The following patterns can be autofixed in TypeScript:
```tsx
// autofix to function expression with type annotation
// [2, { "namedComponents": "function-expression" }]
-var Component: React.FC = (props) => {
+const Component: React.FC = (props) => {
return ;
};
// autofix to arrow function with type annotation
// [2, { "namedComponents": "function-expression" }]
-var Component: React.FC = function (props) {
+const Component: React.FC = function (props) {
return ;
};
@@ -219,7 +219,7 @@ function Component(props: Props) {
return ;
}
-var Component = function (props: Props) {
+const Component = function (props: Props) {
return ;
};
@@ -229,7 +229,7 @@ function Component(props: Props) {
return ;
}
-var Component = function (props: Props) {
+const Component = function (props: Props) {
return ;
};
diff --git a/lib/rules/function-component-definition.js b/lib/rules/function-component-definition.js
index 8f20e63366..f5dd96e16e 100644
--- a/lib/rules/function-component-definition.js
+++ b/lib/rules/function-component-definition.js
@@ -21,8 +21,8 @@ function buildFunction(template, parts) {
const NAMED_FUNCTION_TEMPLATES = {
'function-declaration': 'function {name}{typeParams}({params}){returnType} {body}',
- 'arrow-function': 'var {name}{typeAnnotation} = {typeParams}({params}){returnType} => {body}',
- 'function-expression': 'var {name}{typeAnnotation} = function{typeParams}({params}){returnType} {body}',
+ 'arrow-function': 'const {name}{typeAnnotation} = {typeParams}({params}){returnType} => {body}',
+ 'function-expression': 'const {name}{typeAnnotation} = function{typeParams}({params}){returnType} {body}',
};
const UNNAMED_FUNCTION_TEMPLATES = {