diff --git a/lib/components/Balloon/Balloon.tsx b/lib/components/Balloon/Balloon.tsx
index a3562cd..ad2cbdf 100644
--- a/lib/components/Balloon/Balloon.tsx
+++ b/lib/components/Balloon/Balloon.tsx
@@ -75,10 +75,10 @@ export class Balloon extends React.Component<BalloonProps, BalloonState> {
         };
     }
 
-    UNSAFE_componentWillReceiveProps(newProps: BalloonProps) {
-        this.setState({
-            visible: this.state.hovered || newProps.expanded,
-        });
+    static getDerivedStateFromProps(props: BalloonProps, state: BalloonState): Partial<BalloonState> | null {
+        return {
+            visible: state.hovered || props.expanded
+        };
     }
 
     shouldComponentUpdate(newProps: BalloonProps, newState: BalloonState): boolean {
diff --git a/lib/components/DateTime/Calendar.tsx b/lib/components/DateTime/Calendar.tsx
index d4bda68..795268c 100644
--- a/lib/components/DateTime/Calendar.tsx
+++ b/lib/components/DateTime/Calendar.tsx
@@ -78,26 +78,24 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
         }
     };
 
-    private value: MethodDate;
     private monthNames: string[];
     private dayNames: string[];
     private _container: HTMLDivElement;
     private nextFocusRow?: number;
     private nextFocusCol?: number;
 
-
     constructor(props: CalendarProps) {
         super(props);
 
+        let currentDate: MethodDate;
         if (typeof (this.props.value) === 'string') {
-            this.value = MethodDate.fromString(this.props.localTimezone, this.props.value);
+            currentDate = MethodDate.fromString(this.props.localTimezone, this.props.value);
         } else if (this.props.value) {
-            this.value = MethodDate.fromDate(this.props.localTimezone, this.props.value);
+            currentDate = MethodDate.fromDate(this.props.localTimezone, this.props.value);
         } else {
-            this.value = new MethodDate(this.props.localTimezone);
+            currentDate = new MethodDate(this.props.localTimezone);
         }
 
-        let currentDate = this.value.copy();
         if (props.year > 0) {
             currentDate.year = props.year;
         }
@@ -120,33 +118,29 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
         this.setContainerRef = this.setContainerRef.bind(this);
     }
 
-    UNSAFE_componentWillReceiveProps(newProps: CalendarProps) {
-        const date = this.state.currentDate.copy();
+    static getDerivedStateFromProps(props: CalendarProps, state: CalendarState): Partial<CalendarState> | null {
+        const date = state.currentDate.copy();
         let update = false;
-        if (newProps.year !== this.props.year && newProps.year > 0) {
-            date.year = newProps.year;
+
+        if (props.year > 0) {
+            date.year = props.year;
             update = true;
         }
-        if (
-            typeof (newProps.month) === 'number' &&
-            newProps.month !== this.props.month &&
-            (newProps.month === 0 || newProps.month > 0)
+
+        if (typeof (props.month) === 'number' &&
+            (props.month === 0 || props.month > 0)
         ) {
-            date.month = newProps.month;
+            date.month = props.month;
             update = true;
         }
-        if (update && !this.state.detached && date.isValid()) {
-            this.setState({ currentDate: date });
-        }
-        if (this.props.value !== newProps.value || this.props.localTimezone !== newProps.localTimezone) {
-            if (typeof (newProps.value) === 'string') {
-                this.value = MethodDate.fromString(newProps.localTimezone, newProps.value);
-            } else if (newProps.value) {
-                this.value = MethodDate.fromDate(newProps.localTimezone, newProps.value);
-            } else {
-                this.value = new MethodDate(newProps.localTimezone);
-            }
+
+        if (update && !state.detached && date.isValid()) {
+           return { 
+               currentDate: date
+            };
         }
+
+        return null;
     }
 
     componentDidUpdate() {
@@ -283,6 +277,15 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
         const curYear = this.state.currentDate.year;
         const curMonth = this.state.currentDate.month;
 
+        let currentDate: MethodDate;
+        if (typeof (this.props.value) === 'string') {
+            currentDate = MethodDate.fromString(this.props.localTimezone, this.props.value);
+        } else if (this.props.value) {
+            currentDate = MethodDate.fromDate(this.props.localTimezone, this.props.value);
+        } else {
+            currentDate = new MethodDate(this.props.localTimezone);
+        }
+
         const weekdays = this.dayNames.map(day => {
             return (
                 <Attr.div key={day} attr={this.props.attr.weekDayHeader}>
@@ -351,9 +354,9 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
                 if (this.props.value) {
                     const isSelected = (
                         this.props.value &&
-                        date === this.value.date &&
-                        col.month === this.value.month &&
-                        col.year === this.value.year
+                        date === currentDate.date &&
+                        col.month === currentDate.month &&
+                        col.year === currentDate.year
                     );
                     if (isSelected) {
                         return (
diff --git a/lib/components/DateTime/DatePicker.tsx b/lib/components/DateTime/DatePicker.tsx
index f767464..36cd1d4 100644
--- a/lib/components/DateTime/DatePicker.tsx
+++ b/lib/components/DateTime/DatePicker.tsx
@@ -124,7 +124,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
     constructor(props: DatePickerProps) {
         super(props);
 
-        const newState = this.getInitialState(props, '');
+        const newState = DatePicker.getInitialState(props, '');
         this.state = {
             ...newState,
             expanded: false,
@@ -140,23 +140,23 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
      *
      * @param props DatePickerProps
      */
-    getInitialState(props: DatePickerProps, currentValue: string): DatePickerState {
+    static getInitialState(props: DatePickerProps, currentValue: string, currentInitialValue?: MethodDate): DatePickerState {
         const local = props.localTimezone;
         let value = currentValue;
         let initialValue: MethodDate = null;
         if (props.initialValue) {
             if (props.initialValue === 'invalid') {
-                if (this.state && this.state.initialValue) {
+                if (currentInitialValue) {
                     initialValue = MethodDate.fromString(
                         props.localTimezone,
-                        this.state.initialValue.dateObject.toJSON()
+                        currentInitialValue.dateObject.toJSON()
                     );
                 }
             } else if (typeof(props.initialValue) === 'string') {
                 const date = MethodDate.fromString(local, props.initialValue);
                 if (date && dateIsValid(date.dateObject, local)) {
                     initialValue = date;
-                    const parsed = this.parse(currentValue);
+                    const parsed = DatePicker.parse(currentValue, props.format, props.localTimezone);
                     if (
                         date.year !== parsed.year ||
                         date.month !== (parsed.month - 1) ||
@@ -203,18 +203,8 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
         };
     }
 
-    /**
-     * Update the Date/Time object used internally with a new initialValue
-     *
-     * @param newProps new DatePickerProps
-     */
-    UNSAFE_componentWillReceiveProps(newProps: DatePickerProps) {
-        if ((this.props.initialValue !== newProps.initialValue || this.props.localTimezone !== newProps.localTimezone) && newProps.initialValue !== 'invalid') {
-            const newState = this.getInitialState(newProps, this.input.value);
-            this.setState({
-                ...newState,
-            });
-        }
+    static getDerivedStateFromProps(props: DatePickerProps, state: DatePickerState): Partial<DatePickerState> | null {
+        return DatePicker.getInitialState(props, state.value, state.initialValue);
     }
 
     componentDidMount() {
@@ -227,7 +217,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
         window.removeEventListener('keydown', this.onKeydown);
     }
 
-    parse(newValue: string) {
+    static parse(newValue: string, format: DateFormat, localTimezone: boolean) {
         let valid = true;
 
         let split = newValue.split('/');
@@ -239,17 +229,17 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
         }
 
         let year, month, date;
-        if (this.props.format === DateFormat.DDMMYYYY) {
+        if (format === DateFormat.DDMMYYYY) {
             year = parseInt(split[2]);
             month = parseInt(split[1]);
             date = parseInt(split[0]);
         }
-        else if (this.props.format === DateFormat.MMDDYYYY) {
+        else if (format === DateFormat.MMDDYYYY) {
             year = parseInt(split[2]);
             month = parseInt(split[0]);
             date = parseInt(split[1]);
         }
-        else if (this.props.format === DateFormat.YYYYMMDD) {
+        else if (format === DateFormat.YYYYMMDD) {
             year = parseInt(split[0]);
             month = parseInt(split[1]);
             date = parseInt(split[2]);
@@ -271,7 +261,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
 
         if (valid) {
             let parsed = new MethodDate(
-                this.props.localTimezone,
+                localTimezone,
                 year,
                 month - 1,
                 date
@@ -305,7 +295,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
                 this.setState({value: newValue});
             }
         } else {
-            let result = this.parse(newValue);
+            let result = DatePicker.parse(newValue, this.props.format, this.props.localTimezone);
             if (result.valid) {
                 const initialValue = this.state.initialValue;
                 const dateValue = new MethodDate(
@@ -387,7 +377,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
 
         const placeholder = placeholders[this.props.format];
 
-        const parsed = this.parse(this.state.value);
+        const parsed = DatePicker.parse(this.state.value, this.props.format, this.props.localTimezone);
         const inputClassName = css('date-picker-input', {
             'error': !!this.props.error || (
                 !parsed.valid && !!this.props.initialValue
diff --git a/lib/components/DateTime/DateTimeField.tsx b/lib/components/DateTime/DateTimeField.tsx
index c2c62ab..e1739d8 100644
--- a/lib/components/DateTime/DateTimeField.tsx
+++ b/lib/components/DateTime/DateTimeField.tsx
@@ -133,10 +133,10 @@ export class DateTimeField extends React.Component<DateTimeFieldProps, Partial<D
     constructor(props: DateTimeFieldProps) {
         super(props);
 
-        this.state = this.getInitialState(props);
+        this.state = DateTimeField.getInitialState(props);
     }
 
-    getInitialState(props: DateTimeFieldProps): DateTimeFieldState {
+    static getInitialState(props: DateTimeFieldProps): DateTimeFieldState {
         const local = props.localTimezone;
         let invalid = false;
         let initialValue = null;
@@ -212,10 +212,8 @@ export class DateTimeField extends React.Component<DateTimeFieldProps, Partial<D
         };
     }
 
-    UNSAFE_componentWillReceiveProps(newProps: DateTimeFieldProps) {
-        if (this.props.initialValue !== newProps.initialValue || this.props.localTimezone !== newProps.localTimezone) {
-            this.setState(this.getInitialState(newProps));
-        }
+    static getDerivedStateFromProps(props: DateTimeFieldProps, _state: DateTimeFieldState): Partial<DateTimeFieldState> | null {
+        return DateTimeField.getInitialState(props);
     }
 
     onDatePaste = (newDate: string): boolean => {
diff --git a/lib/components/DateTime/TimeInput.tsx b/lib/components/DateTime/TimeInput.tsx
index dc21426..237e030 100644
--- a/lib/components/DateTime/TimeInput.tsx
+++ b/lib/components/DateTime/TimeInput.tsx
@@ -88,10 +88,6 @@ export class TimeInput extends React.Component<TimeInputProps, TimeInputState> {
         }
     };
 
-    private hours: FormOption[];
-    private minutes: FormOption[];
-    private seconds: FormOption[];
-
     private hourInput: HTMLSelectElement;
     private minuteInput: HTMLSelectElement;
     private secondInput: HTMLSelectElement;
@@ -99,27 +95,11 @@ export class TimeInput extends React.Component<TimeInputProps, TimeInputState> {
 
     constructor(props: TimeInputProps) {
         super(props);
-        this.state = this.handleState(props);
-
-        const numHours = props.militaryTime ? 24 : 12;
-        this.hours = [];
-        for (let index = 1; index < numHours; index++) {
-            const value = index < 10 ? `0${index}` : `${index}`;
-            this.hours.push({label: value, value: value});
-        }
-        this.hours.push({label: '12', value: '00'});
-
-        this.minutes = [];
-        this.seconds = [];
-        for (let index = 0; index < 60; index++) {
-            const value = index < 10 ? `0${index}` : `${index}`;
-            this.minutes.push({label: value, value: value});
-            this.seconds.push({label: value, value: value});
-        }
+        this.state = TimeInput.handleState(props);
     }
 
-    handleState(props: TimeInputProps): TimeInputState {
-        const time = this.handleTimezone(props.value);
+    static handleState(props: TimeInputProps): TimeInputState {
+        const time = TimeInput.handleTimezone(props.value, props.localTimezone);
 
         const hoursTz = props.localTimezone ? time.getHours() : time.getUTCHours();
         const hours = !isNaN(hoursTz) ? hoursTz : 0;
@@ -135,11 +115,11 @@ export class TimeInput extends React.Component<TimeInputProps, TimeInputState> {
         };
     }
 
-    handleTimezone(value: string | Date): Date {
+    static handleTimezone(value: string | Date, localTimezone: boolean): Date {
         let time;
         if (value) {
             time = typeof(value) === 'string' ? new Date(value) : value;
-            time = this.props.localTimezone
+            time = localTimezone
                 ? time
                 : new Date(Date.UTC(
                     time.getUTCFullYear(),
@@ -151,7 +131,7 @@ export class TimeInput extends React.Component<TimeInputProps, TimeInputState> {
                 ));
         } else {
             time = new Date();
-            if (this.props.localTimezone) {
+            if (localTimezone) {
                 time = new Date(
                     time.getFullYear(),
                     time.getMonth(),
@@ -170,41 +150,8 @@ export class TimeInput extends React.Component<TimeInputProps, TimeInputState> {
         return time;
     }
 
-    UNSAFE_componentWillReceiveProps(newProps) {
-        let newState: any = {};
-        let update = false;
-        let newHours = this.state.hours;
-        if (newProps.value !== this.props.value || this.props.localTimezone !== newProps.localTimezone) {
-            newState = this.handleState(newProps);
-            newHours = newState.hours;
-            update = true;
-        }
-
-        if (this.props.militaryTime !== newProps.militaryTime) {
-            const numHours = newProps.militaryTime ? 24 : 12;
-            this.hours = [];
-            for (let index = 0; index < numHours; index++) {
-                const value = index < 10 ? `0${index}` : `${index}`;
-                this.hours.push({label: value, value: value});
-            }
-
-            const hours = !newProps.militaryTime && newHours > 11
-                 ? newHours - 12 : newHours;
-            const period = newProps.militaryTime ? '24H'
-                : (newHours > 11 ? 'PM' : 'AM');
-
-            newState.hours = hours;
-            newState.period = period;
-            update = true;
-        }
-
-        if (update) {
-            this.setState(newState);
-        }
-    }
-
     update(name: 'hours' | 'minutes' | 'seconds' | 'period', value: string | number, period?: 'AM' | 'PM' | '24H') {
-        const date = this.handleTimezone(this.props.value);
+        const date = TimeInput.handleTimezone(this.props.value, this.props.localTimezone);
         const newState = {...this.state};
         if (name !== 'period') {
             newState[name] = typeof(value) === 'string' ? parseInt(value) : value;
@@ -248,23 +195,39 @@ export class TimeInput extends React.Component<TimeInputProps, TimeInputState> {
         this.setState(newState);
     }
 
+    private optionMap(option, attr) {
+        return <Attr.option
+            value={option.value}
+            key={option.value}
+            disabled={option.disabled}
+            hidden={option.hidden}
+            attr={attr}
+        >
+            {option.label}
+        </Attr.option>;
+    }
+
     render() {
         const hours = this.state.hours < 10 ? `0${this.state.hours}` : this.state.hours;
         const minutes = this.state.minutes < 10 ? `0${this.state.minutes}` : this.state.minutes;
         const seconds = this.state.seconds < 10 ? `0${this.state.seconds}` : this.state.seconds;
         const inputClassName = css('time-input', {'error': this.props.error}, this.props.inputClassName);
 
-        const optionMap = (option, attr) => {
-            return <Attr.option
-                value={option.value}
-                key={option.value}
-                disabled={option.disabled}
-                hidden={option.hidden}
-                attr={attr}
-            >
-                {option.label}
-            </Attr.option>;
-        };
+        const hoursList = [];
+        const minutesList = [];
+        const secondsList = [];
+
+        const numHours = this.props.militaryTime ? 24 : 12;
+        for (let index = 0; index < numHours; index++) {
+            const value = index < 10 ? `0${index}` : `${index}`;
+            hoursList.push(this.optionMap({label: value, value: value}, this.props.attr.hourOption));
+        }
+
+        for (let index = 0; index < 60; index++) {
+            const value = index < 10 ? `0${index}` : `${index}`;
+            minutesList.push(this.optionMap({label: value, value: value}, this.props.attr.minuteOption));
+            secondsList.push(this.optionMap({label: value, value: value}, this.props.attr.secondOption));
+        }
 
         const period = this.props.militaryTime ? '' : <Attr.select
             name={this.props.name}
@@ -298,9 +261,7 @@ export class TimeInput extends React.Component<TimeInputProps, TimeInputState> {
             className={inputClassName}
             attr={this.props.attr.secondSelect}
         >
-            {this.seconds.map(option =>
-                optionMap(option, this.props.attr.secondOption)
-            )}
+            {secondsList}
         </Attr.select>;
 
         return (
@@ -317,9 +278,7 @@ export class TimeInput extends React.Component<TimeInputProps, TimeInputState> {
                     className={inputClassName}
                     attr={this.props.attr.hourSelect}
                 >
-                    {this.hours.map(option =>
-                        optionMap(option, this.props.attr.hourOption)
-                    )}
+                    {hoursList}
                 </Attr.select>
                 <Attr.select
                     name={this.props.name}
@@ -330,9 +289,7 @@ export class TimeInput extends React.Component<TimeInputProps, TimeInputState> {
                     className={inputClassName}
                     attr={this.props.attr.minuteSelect}
                 >
-                    {this.minutes.map(option =>
-                        optionMap(option, this.props.attr.minuteOption)
-                    )}
+                    {minutesList}
                 </Attr.select>
                 {secondsInput}
                 {period}
diff --git a/lib/components/Input/NumberInput.tsx b/lib/components/Input/NumberInput.tsx
index 23aeb9d..4fd179a 100644
--- a/lib/components/Input/NumberInput.tsx
+++ b/lib/components/Input/NumberInput.tsx
@@ -81,7 +81,7 @@ export class NumberInput extends React.Component<NumberInputProps, NumberInputSt
         super(props);
 
         this.paste = false;
-        this.state = this.getInitialState(this.props.initialValue);
+        this.state = NumberInput.getInitialState(this.props.initialValue);
     }
 
     onKeyDown = (event) => {
@@ -168,7 +168,7 @@ export class NumberInput extends React.Component<NumberInputProps, NumberInputSt
         this.paste = true;
     }
 
-    getInitialState(initialValue: number | string): NumberInputState {
+    static getInitialState(initialValue: number | string, currentValue?: string): NumberInputState {
         let value = '';
         if (typeof (initialValue) === 'number') {
             value = initialValue.toString();
@@ -178,9 +178,9 @@ export class NumberInput extends React.Component<NumberInputProps, NumberInputSt
 
         if (value === '' || value == null) {
             value = '';
-        } else if (this.state && typeof (this.state.value) === 'string') {
-            if (parseFloat(this.state.value) === parseFloat(value)) {
-                value = this.state.value;
+        } else if (typeof(currentValue) === 'string') {
+            if (parseFloat(currentValue) === parseFloat(value)) {
+                value = currentValue;
             }
         }
 
@@ -214,7 +214,11 @@ export class NumberInput extends React.Component<NumberInputProps, NumberInputSt
         return outValue;
     }
 
-    componentDidUpdate(_oldProps: NumberInputProps, oldState: NumberInputState) {
+    componentDidUpdate(oldProps: NumberInputProps, oldState: NumberInputState) {
+        if (oldProps.initialValue !== this.props.initialValue) {	
+            this.setState(NumberInput.getInitialState(this.props.initialValue, oldState.value));	
+        }
+        
         if (oldState.value === this.state.value) {
             return;
         }
@@ -226,12 +230,6 @@ export class NumberInput extends React.Component<NumberInputProps, NumberInputSt
         }
     }
 
-    UNSAFE_componentWillReceiveProps(newProps: NumberInputProps) {
-        if (this.props.initialValue !== newProps.initialValue) {
-            this.setState(this.getInitialState(newProps.initialValue));
-        }
-    }
-
     render() {
         const inputAttr = this.props.attr && this.props.attr.input
             ? this.props.attr.input : {};