diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/component.jsx
index 5d00ae901c..d881f1b415 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/component.jsx
@@ -143,6 +143,8 @@ class UserDropdown extends PureComponent {
       showNestedOptions: false,
     };
 
+    this.title = _.uniqueId('dropdown-title-');
+    this.seperator = _.uniqueId('action-separator-');
     this.audio = new Audio(`${Meteor.settings.public.app.cdn + Meteor.settings.public.app.basename}/resources/sounds/bbb-handRaise.mp3`);
 
     this.handleScroll = this.handleScroll.bind(this);
@@ -154,11 +156,6 @@ class UserDropdown extends PureComponent {
     this.makeDropdownItem = this.makeDropdownItem.bind(this);
   }
 
-  componentWillMount() {
-    this.title = _.uniqueId('dropdown-title-');
-    this.seperator = _.uniqueId('action-separator-');
-  }
-
   componentDidUpdate() {
     this.checkDropdownDirection();
   }
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-menu-item/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-menu-item/component.jsx
index db141bbfad..443321242e 100755
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-menu-item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-menu-item/component.jsx
@@ -11,18 +11,13 @@ export default class ToolbarMenuItem extends Component {
 
     // a flag to keep track of whether the menu item was actually clicked
     this.clicked = false;
-
+    this.uniqueRef = _.uniqueId('toolbar-menu-item');
     this.handleTouchStart = this.handleTouchStart.bind(this);
     this.handleOnMouseUp = this.handleOnMouseUp.bind(this);
     this.handleOnMouseDown = this.handleOnMouseDown.bind(this);
     this.setRef = this.setRef.bind(this);
   }
 
-  // generating a unique ref string for the toolbar-item
-  componentWillMount() {
-    this.uniqueRef = _.uniqueId('toolbar-menu-item');
-  }
-
   componentDidMount() {
     // adding and removing touchstart events can be done via standard React way
     // by passing onTouchStart={this.funcName} once they stop triggering mousedown events
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-submenu-item/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-submenu-item/component.jsx
index a547686581..bc04ac5025 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-submenu-item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-submenu-item/component.jsx
@@ -7,17 +7,12 @@ import { styles } from '../styles';
 export default class ToolbarSubmenuItem extends Component {
   constructor() {
     super();
-
+    this.uniqueRef = _.uniqueId('toolbar-submenu-item');
     this.handleTouchStart = this.handleTouchStart.bind(this);
     this.handleOnMouseUp = this.handleOnMouseUp.bind(this);
     this.setRef = this.setRef.bind(this);
   }
 
-  // generating a unique ref string for the toolbar-item
-  componentWillMount() {
-    this.uniqueRef = _.uniqueId('toolbar-submenu-item');
-  }
-
   componentDidMount() {
     // adding and removing touchstart events can be done via standard React way
     // by passing onTouchStart={this.funcName} once they stop triggering mousedown events