diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/constants.js b/app/assets/javascripts/vue_shared/components/diff_viewer/constants.js
index 6c1840361af29f8fae47457dd4998aea2f1462ac..97769e0d067040b378f78e0a05a8159a61658bba 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/constants.js
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/constants.js
@@ -10,3 +10,14 @@ export const imageViewMode = {
   swipe: 'swipe',
   onion: 'onion',
 };
+
+// State machine states
+export const RENAMED_STATE_IDLING = 'idle';
+export const RENAMED_STATE_LOADING = 'loading';
+export const RENAMED_STATE_ERRORED = 'errored';
+
+// State machine transitions
+export const RENAMED_TRANSITION_LOAD_START = 'LOAD_START';
+export const RENAMED_TRANSITION_LOAD_ERROR = 'LOAD_ERROR';
+export const RENAMED_TRANSITION_LOAD_SUCCEED = 'LOAD_SUCCEED';
+export const RENAMED_TRANSITION_ACKNOWLEDGE_ERROR = 'ACKNOWLEDGE_ERROR';
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue
index b786f7752dfa7bc19daee7efd49e7cd034238ab1..f9d86f4740530b05f22acd68d9968718f2bd7f34 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue
@@ -2,23 +2,23 @@
 import { GlAlert, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import { mapActions } from 'vuex';
 
+import { truncateSha } from '~/lib/utils/text_utility';
+import { __ } from '~/locale';
+
 import {
   TRANSITION_LOAD_START,
   TRANSITION_LOAD_ERROR,
   TRANSITION_LOAD_SUCCEED,
   TRANSITION_ACKNOWLEDGE_ERROR,
-  STATE_IDLING,
   STATE_LOADING,
   STATE_ERRORED,
-  RENAMED_DIFF_TRANSITIONS,
-} from '~/diffs/constants';
-import { truncateSha } from '~/lib/utils/text_utility';
-import { __ } from '~/locale';
+  getStateMachine,
+} from './renamed/state_machine';
 
 export default {
   STATE_LOADING,
   STATE_ERRORED,
-  TRANSITIONS: RENAMED_DIFF_TRANSITIONS,
+  stateMachine: getStateMachine(),
   uiText: {
     showLink: __('Show file contents'),
     commitLink: __('View file @ %{commitSha}'),
@@ -37,11 +37,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      state: STATE_IDLING,
-    };
-  },
   computed: {
     shortSha() {
       return truncateSha(this.diffFile.content_sha);
@@ -52,25 +47,15 @@ export default {
   },
   methods: {
     ...mapActions('diffs', ['switchToFullDiffFromRenamedFile']),
-    transition(transitionEvent) {
-      const key = `${this.state}:${transitionEvent}`;
-
-      if (this.$options.TRANSITIONS[key]) {
-        this.state = this.$options.TRANSITIONS[key];
-      }
-    },
-    is(state) {
-      return this.state === state;
-    },
     switchToFull() {
-      this.transition(TRANSITION_LOAD_START);
+      this.$options.stateMachine.send(TRANSITION_LOAD_START);
 
       this.switchToFullDiffFromRenamedFile({ diffFile: this.diffFile })
         .then(() => {
-          this.transition(TRANSITION_LOAD_SUCCEED);
+          this.$options.stateMachine.send(TRANSITION_LOAD_SUCCEED);
         })
         .catch(() => {
-          this.transition(TRANSITION_LOAD_ERROR);
+          this.$options.stateMachine.send(TRANSITION_LOAD_ERROR);
         });
     },
     clickLink(event) {
@@ -81,7 +66,7 @@ export default {
       }
     },
     dismissError() {
-      this.transition(TRANSITION_ACKNOWLEDGE_ERROR);
+      this.$options.stateMachine.send(TRANSITION_ACKNOWLEDGE_ERROR);
     },
   },
 };
@@ -89,10 +74,10 @@ export default {
 
 <template>
   <div class="nothing-here-block">
-    <gl-loading-icon v-if="is($options.STATE_LOADING)" size="sm" />
+    <gl-loading-icon v-if="$options.stateMachine.is($options.STATE_LOADING)" size="sm" />
     <template v-else>
       <gl-alert
-        v-show="is($options.STATE_ERRORED)"
+        v-show="$options.stateMachine.is($options.STATE_ERRORED)"
         class="gl-mb-5 gl-text-left"
         variant="danger"
         @dismiss="dismissError"
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed/state_machine.js b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed/state_machine.js
new file mode 100644
index 0000000000000000000000000000000000000000..b6d801a30719a187992bf71cfc3de02594d1d536
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed/state_machine.js
@@ -0,0 +1,45 @@
+import { machine } from '~/lib/utils/finite_state_machine';
+import {
+  RENAMED_TRANSITION_LOAD_START as TRANSITION_LOAD_START,
+  RENAMED_TRANSITION_LOAD_ERROR as TRANSITION_LOAD_ERROR,
+  RENAMED_TRANSITION_LOAD_SUCCEED as TRANSITION_LOAD_SUCCEED,
+  RENAMED_TRANSITION_ACKNOWLEDGE_ERROR as TRANSITION_ACKNOWLEDGE_ERROR,
+  RENAMED_STATE_IDLING as STATE_IDLING,
+  RENAMED_STATE_LOADING as STATE_LOADING,
+  RENAMED_STATE_ERRORED as STATE_ERRORED,
+} from '../../constants';
+
+export function getStateMachine() {
+  return machine({
+    initial: STATE_IDLING,
+    states: {
+      [STATE_IDLING]: {
+        on: {
+          [TRANSITION_LOAD_START]: STATE_LOADING,
+        },
+      },
+      [STATE_LOADING]: {
+        on: {
+          [TRANSITION_LOAD_ERROR]: STATE_ERRORED,
+          [TRANSITION_LOAD_SUCCEED]: STATE_IDLING,
+        },
+      },
+      [STATE_ERRORED]: {
+        on: {
+          [TRANSITION_LOAD_START]: STATE_LOADING,
+          [TRANSITION_ACKNOWLEDGE_ERROR]: STATE_IDLING,
+        },
+      },
+    },
+  });
+}
+
+export {
+  TRANSITION_LOAD_START,
+  TRANSITION_LOAD_ERROR,
+  TRANSITION_LOAD_SUCCEED,
+  TRANSITION_ACKNOWLEDGE_ERROR,
+  STATE_IDLING,
+  STATE_LOADING,
+  STATE_ERRORED,
+};
diff --git a/spec/frontend/vue_shared/components/diff_viewer/viewers/renamed/state_machine_spec.js b/spec/frontend/vue_shared/components/diff_viewer/viewers/renamed/state_machine_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..179502c968499464938e0e91253a8dfa601104ec
--- /dev/null
+++ b/spec/frontend/vue_shared/components/diff_viewer/viewers/renamed/state_machine_spec.js
@@ -0,0 +1,66 @@
+import {
+  TRANSITION_LOAD_START,
+  TRANSITION_LOAD_ERROR,
+  TRANSITION_LOAD_SUCCEED,
+  TRANSITION_ACKNOWLEDGE_ERROR,
+  STATE_IDLING,
+  STATE_LOADING,
+  STATE_ERRORED,
+  getStateMachine,
+} from '~/vue_shared/components/diff_viewer/viewers/renamed/state_machine';
+
+describe('Renamed diff viewer state machine', () => {
+  let machine;
+
+  beforeEach(() => {
+    machine = getStateMachine();
+  });
+
+  it(`starts in the "${STATE_IDLING}" state`, () => {
+    expect(machine.value).toBe(STATE_IDLING);
+  });
+
+  it.each`
+    state            | request          | result
+    ${STATE_IDLING}  | ${STATE_IDLING}  | ${true}
+    ${STATE_IDLING}  | ${STATE_LOADING} | ${false}
+    ${STATE_IDLING}  | ${STATE_ERRORED} | ${false}
+    ${STATE_LOADING} | ${STATE_LOADING} | ${true}
+    ${STATE_LOADING} | ${STATE_IDLING}  | ${false}
+    ${STATE_LOADING} | ${STATE_ERRORED} | ${false}
+    ${STATE_ERRORED} | ${STATE_ERRORED} | ${true}
+    ${STATE_ERRORED} | ${STATE_IDLING}  | ${false}
+    ${STATE_ERRORED} | ${STATE_LOADING} | ${false}
+    ${'randomtext'}  | ${'randomtext'}  | ${true}
+    ${'randomtext'}  | ${'othertext'}   | ${false}
+  `('returns $result for "$request" when the state is "$state"', ({ request, result, state }) => {
+    machine.value = state;
+
+    expect(machine.is(request)).toBe(result);
+  });
+
+  it.each`
+    state        | transition                      | result
+    ${'idle'}    | ${TRANSITION_LOAD_START}        | ${STATE_LOADING}
+    ${'idle'}    | ${TRANSITION_LOAD_ERROR}        | ${STATE_IDLING}
+    ${'idle'}    | ${TRANSITION_LOAD_SUCCEED}      | ${STATE_IDLING}
+    ${'idle'}    | ${TRANSITION_ACKNOWLEDGE_ERROR} | ${STATE_IDLING}
+    ${'loading'} | ${TRANSITION_LOAD_START}        | ${STATE_LOADING}
+    ${'loading'} | ${TRANSITION_LOAD_ERROR}        | ${STATE_ERRORED}
+    ${'loading'} | ${TRANSITION_LOAD_SUCCEED}      | ${STATE_IDLING}
+    ${'loading'} | ${TRANSITION_ACKNOWLEDGE_ERROR} | ${STATE_LOADING}
+    ${'errored'} | ${TRANSITION_LOAD_START}        | ${STATE_LOADING}
+    ${'errored'} | ${TRANSITION_LOAD_ERROR}        | ${STATE_ERRORED}
+    ${'errored'} | ${TRANSITION_LOAD_SUCCEED}      | ${STATE_ERRORED}
+    ${'errored'} | ${TRANSITION_ACKNOWLEDGE_ERROR} | ${STATE_IDLING}
+  `(
+    'correctly updates the state to "$result" when it starts as "$state" and the transition is "$transition"',
+    ({ state, transition, result }) => {
+      machine.value = state;
+
+      machine.send(transition);
+
+      expect(machine.value).toEqual(result);
+    },
+  );
+});
diff --git a/spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js b/spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js
index 9f433816b34d726dfee96e0a08690dc9b5ff1325..300ae28bd4f6d4b6edb9d7d09892a28353b799e7 100644
--- a/spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js
+++ b/spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js
@@ -1,14 +1,11 @@
 import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import {
-  TRANSITION_LOAD_START,
-  TRANSITION_LOAD_ERROR,
-  TRANSITION_LOAD_SUCCEED,
-  TRANSITION_ACKNOWLEDGE_ERROR,
-  STATE_IDLING,
-  STATE_LOADING,
-  STATE_ERRORED,
-} from '~/diffs/constants';
+  RENAMED_TRANSITION_ACKNOWLEDGE_ERROR as TRANSITION_ACKNOWLEDGE_ERROR,
+  RENAMED_STATE_IDLING as STATE_IDLING,
+  RENAMED_STATE_LOADING as STATE_LOADING,
+  RENAMED_STATE_ERRORED as STATE_ERRORED,
+} from '~/vue_shared/components/diff_viewer/constants';
 import Renamed from '~/vue_shared/components/diff_viewer/viewers/renamed.vue';
 
 const localVue = createLocalVue();
@@ -48,63 +45,6 @@ describe('Renamed Diff Viewer', () => {
     }
   });
 
-  describe('is', () => {
-    beforeEach(() => {
-      wrapper = createRenamedComponent({ props: { diffFile } });
-    });
-
-    it.each`
-      state        | request      | result
-      ${'idle'}    | ${'idle'}    | ${true}
-      ${'idle'}    | ${'loading'} | ${false}
-      ${'idle'}    | ${'errored'} | ${false}
-      ${'loading'} | ${'loading'} | ${true}
-      ${'loading'} | ${'idle'}    | ${false}
-      ${'loading'} | ${'errored'} | ${false}
-      ${'errored'} | ${'errored'} | ${true}
-      ${'errored'} | ${'idle'}    | ${false}
-      ${'errored'} | ${'loading'} | ${false}
-    `(
-      'returns the $result for "$request" when the state is "$state"',
-      ({ request, result, state }) => {
-        wrapper.vm.state = state;
-
-        expect(wrapper.vm.is(request)).toEqual(result);
-      },
-    );
-  });
-
-  describe('transition', () => {
-    beforeEach(() => {
-      wrapper = createRenamedComponent({ props: { diffFile } });
-    });
-
-    it.each`
-      state        | transition                      | result
-      ${'idle'}    | ${TRANSITION_LOAD_START}        | ${STATE_LOADING}
-      ${'idle'}    | ${TRANSITION_LOAD_ERROR}        | ${STATE_IDLING}
-      ${'idle'}    | ${TRANSITION_LOAD_SUCCEED}      | ${STATE_IDLING}
-      ${'idle'}    | ${TRANSITION_ACKNOWLEDGE_ERROR} | ${STATE_IDLING}
-      ${'loading'} | ${TRANSITION_LOAD_START}        | ${STATE_LOADING}
-      ${'loading'} | ${TRANSITION_LOAD_ERROR}        | ${STATE_ERRORED}
-      ${'loading'} | ${TRANSITION_LOAD_SUCCEED}      | ${STATE_IDLING}
-      ${'loading'} | ${TRANSITION_ACKNOWLEDGE_ERROR} | ${STATE_LOADING}
-      ${'errored'} | ${TRANSITION_LOAD_START}        | ${STATE_LOADING}
-      ${'errored'} | ${TRANSITION_LOAD_ERROR}        | ${STATE_ERRORED}
-      ${'errored'} | ${TRANSITION_LOAD_SUCCEED}      | ${STATE_ERRORED}
-      ${'errored'} | ${TRANSITION_ACKNOWLEDGE_ERROR} | ${STATE_IDLING}
-    `(
-      'correctly updates the state to "$result" when it starts as "$state" and the transition is "$transition"',
-      ({ state, transition, result }) => {
-        wrapper.vm.state = state;
-
-        wrapper.vm.transition(transition);
-
-        expect(wrapper.vm.state).toEqual(result);
-      },
-    );
-  });
-
   describe('switchToFull', () => {
     let store;
 
@@ -148,11 +88,11 @@ describe('Renamed Diff Viewer', () => {
       ({ after, resolvePromise }) => {
         store.dispatch[resolvePromise]();
 
-        expect(wrapper.vm.state).toEqual(STATE_IDLING);
+        expect(wrapper.vm.$options.stateMachine.value).toBe(STATE_IDLING);
 
         wrapper.vm.switchToFull();
 
-        expect(wrapper.vm.state).toEqual(STATE_LOADING);
+        expect(wrapper.vm.$options.stateMachine.value).toBe(STATE_LOADING);
 
         return (
           wrapper.vm
@@ -161,7 +101,7 @@ describe('Renamed Diff Viewer', () => {
             // This tick waits for the state change in the promise .then/.catch to bubble into the component
             .then(() => wrapper.vm.$nextTick())
             .then(() => {
-              expect(wrapper.vm.state).toEqual(after);
+              expect(wrapper.vm.$options.stateMachine.value).toBe(after);
             })
         );
       },
@@ -209,17 +149,17 @@ describe('Renamed Diff Viewer', () => {
   });
 
   describe('dismissError', () => {
-    let transitionSpy;
+    let sendSpy;
 
     beforeEach(() => {
       wrapper = createRenamedComponent({ props: { diffFile } });
-      transitionSpy = jest.spyOn(wrapper.vm, 'transition');
+      sendSpy = jest.spyOn(wrapper.vm.$options.stateMachine, 'send');
     });
 
     it(`transitions the component with "${TRANSITION_ACKNOWLEDGE_ERROR}"`, () => {
       wrapper.vm.dismissError();
 
-      expect(transitionSpy).toHaveBeenCalledWith(TRANSITION_ACKNOWLEDGE_ERROR);
+      expect(sendSpy).toHaveBeenCalledWith(TRANSITION_ACKNOWLEDGE_ERROR);
     });
   });