diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d09b242..613fb9ed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 * Migrate to shared GA workflows. Refs UICIRC-1174.
 * *BREAKING* Update stripes-* dependencies to latest version. Refs UICIRC-1176.
 * Add seven new item-level tokens to "Pick slip" staff slip. Fixes UICIRC-1169.
+* Refactor RulesEditor away from componentWillReceiveProps. Refs UICIRC-431.
 
 ## [10.0.1](https://github.com/folio-org/ui-circulation/tree/v10.0.1) (2024-12-04)
 [Full Changelog](https://github.com/folio-org/ui-circulation/compare/v10.0.0...v10.0.1)
diff --git a/src/settings/lib/RuleEditor/RulesEditor.js b/src/settings/lib/RuleEditor/RulesEditor.js
index 912140e0..316e5f90 100644
--- a/src/settings/lib/RuleEditor/RulesEditor.js
+++ b/src/settings/lib/RuleEditor/RulesEditor.js
@@ -161,7 +161,6 @@ export const escapingForSpecialCharactersWhichCanBreakRegExp = (string = '') =>
 class RulesEditor extends React.Component {
   constructor(props) {
     super(props);
-
     initRulesCMM(Codemirror);
     initFoldRules(Codemirror);
     this.state = this.getInitialState();
@@ -232,46 +231,43 @@ class RulesEditor extends React.Component {
     this.cm.display.input.textarea.ariaLabel = formatMessage({ id: 'ui-circulation.settings.circulationRules.label' });
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const nextState = {};
-
-    if (nextProps.typeMapping && !isEqual(nextProps.typeMapping, this.props.typeMapping)) {
-      nextState.typeMapping = nextProps.typeMapping;
-    }
+  componentDidUpdate(prevProps) {
+    this.clearErrors();
+    this.cm.refresh();
 
-    if (nextProps.policyMapping && !isEqual(nextProps.policyMapping, this.props.policyMapping)) {
-      nextState.policyMapping = nextProps.policyMapping;
-    }
+    const {
+      errors,
+      completionLists,
+      filter,
+      code,
+    } = this.props;
 
-    if (nextProps.completionLists && !isEqual(nextProps.completionLists, this.props.completionLists)) {
-      nextState.completionLists = nextProps.completionLists;
+    if (!isEmpty(errors)) {
+      errors.forEach(({ line, message }) => this.renderError(line, message));
     }
 
-    if (!isEmpty(nextState)) {
+    if (completionLists && !isEqual(completionLists, prevProps.completionLists)) {
       this.setState(({ codeMirrorOptions }) => {
         const newCodeMirrorOptions = cloneDeep(codeMirrorOptions);
 
-        return { codeMirrorOptions: Object.assign(newCodeMirrorOptions.mode, nextState) };
+        return {
+          codeMirrorOptions: {
+            ...newCodeMirrorOptions,
+            mode: {
+              ...newCodeMirrorOptions.mode,
+              completionLists,
+            },
+          },
+        };
       });
     }
 
-    if (nextProps.code !== this.props.code) {
-      this.setState(() => ({ code: nextProps.code }));
-    }
-
-    if (nextProps.filter !== this.props.filter) {
-      this.filterRules(nextProps.filter);
+    if (code !== prevProps.code) {
+      this.setState({ code });
     }
-  }
-
-  componentDidUpdate() {
-    this.clearErrors();
-    this.cm.refresh();
-
-    const { errors } = this.props;
 
-    if (!isEmpty(errors)) {
-      errors.forEach(({ line, message }) => this.renderError(line, message));
+    if (filter !== prevProps.filter) {
+      this.filterRules(filter);
     }
   }