diff --git a/api/channel.go b/api/channel.go
index 9c7ac053b0..a8c8505e99 100644
--- a/api/channel.go
+++ b/api/channel.go
@@ -508,6 +508,8 @@ func deleteChannel(c *Context, w http.ResponseWriter, r *http.Request) {
 	sc := Srv.Store.Channel().Get(id)
 	scm := Srv.Store.Channel().GetMember(id, c.Session.UserId)
 	uc := Srv.Store.User().Get(c.Session.UserId)
+	ihc := Srv.Store.Webhook().GetIncomingByChannel(id)
+	ohc := Srv.Store.Webhook().GetOutgoingByChannel(id)
 
 	if cresult := <-sc; cresult.Err != nil {
 		c.Err = cresult.Err
@@ -518,10 +520,18 @@ func deleteChannel(c *Context, w http.ResponseWriter, r *http.Request) {
 	} else if scmresult := <-scm; scmresult.Err != nil {
 		c.Err = scmresult.Err
 		return
+	} else if ihcresult := <-ihc; ihcresult.Err != nil {
+		c.Err = ihcresult.Err
+		return
+	} else if ohcresult := <-ohc; ohcresult.Err != nil {
+		c.Err = ohcresult.Err
+		return
 	} else {
 		channel := cresult.Data.(*model.Channel)
 		user := uresult.Data.(*model.User)
 		channelMember := scmresult.Data.(model.ChannelMember)
+		incomingHooks := ihcresult.Data.([]*model.IncomingWebhook)
+		outgoingHooks := ohcresult.Data.([]*model.OutgoingWebhook)
 
 		if !c.HasPermissionsToTeam(channel.TeamId, "deleteChannel") {
 			return
@@ -545,6 +555,23 @@ func deleteChannel(c *Context, w http.ResponseWriter, r *http.Request) {
 			return
 		}
 
+		now := model.GetMillis()
+		for _, hook := range incomingHooks {
+			go func() {
+				if result := <-Srv.Store.Webhook().DeleteIncoming(hook.Id, now); result.Err != nil {
+					l4g.Error("Encountered error deleting incoming webhook, id=" + hook.Id)
+				}
+			}()
+		}
+
+		for _, hook := range outgoingHooks {
+			go func() {
+				if result := <-Srv.Store.Webhook().DeleteOutgoing(hook.Id, now); result.Err != nil {
+					l4g.Error("Encountered error deleting outgoing webhook, id=" + hook.Id)
+				}
+			}()
+		}
+
 		if dresult := <-Srv.Store.Channel().Delete(channel.Id, model.GetMillis()); dresult.Err != nil {
 			c.Err = dresult.Err
 			return
diff --git a/store/sql_webhook_store.go b/store/sql_webhook_store.go
index 1910984f07..c758e23393 100644
--- a/store/sql_webhook_store.go
+++ b/store/sql_webhook_store.go
@@ -137,6 +137,27 @@ func (s SqlWebhookStore) GetIncomingByUser(userId string) StoreChannel {
 	return storeChannel
 }
 
+func (s SqlWebhookStore) GetIncomingByChannel(channelId string) StoreChannel {
+	storeChannel := make(StoreChannel)
+
+	go func() {
+		result := StoreResult{}
+
+		var webhooks []*model.IncomingWebhook
+
+		if _, err := s.GetReplica().Select(&webhooks, "SELECT * FROM IncomingWebhooks WHERE ChannelId = :ChannelId AND DeleteAt = 0", map[string]interface{}{"ChannelId": channelId}); err != nil {
+			result.Err = model.NewAppError("SqlWebhookStore.GetIncomingByChannel", "We couldn't get the webhooks", "channelId="+channelId+", err="+err.Error())
+		}
+
+		result.Data = webhooks
+
+		storeChannel <- result
+		close(storeChannel)
+	}()
+
+	return storeChannel
+}
+
 func (s SqlWebhookStore) SaveOutgoing(webhook *model.OutgoingWebhook) StoreChannel {
 	storeChannel := make(StoreChannel)
 
diff --git a/store/store.go b/store/store.go
index 1cf686a702..bd2c3681ec 100644
--- a/store/store.go
+++ b/store/store.go
@@ -150,6 +150,7 @@ type WebhookStore interface {
 	SaveIncoming(webhook *model.IncomingWebhook) StoreChannel
 	GetIncoming(id string) StoreChannel
 	GetIncomingByUser(userId string) StoreChannel
+	GetIncomingByChannel(channelId string) StoreChannel
 	DeleteIncoming(webhookId string, time int64) StoreChannel
 	SaveOutgoing(webhook *model.OutgoingWebhook) StoreChannel
 	GetOutgoing(id string) StoreChannel
diff --git a/web/react/components/user_settings/manage_incoming_hooks.jsx b/web/react/components/user_settings/manage_incoming_hooks.jsx
index f5a2774a0a..812169be4c 100644
--- a/web/react/components/user_settings/manage_incoming_hooks.jsx
+++ b/web/react/components/user_settings/manage_incoming_hooks.jsx
@@ -96,7 +96,14 @@ export default class ManageIncomingHooks extends React.Component {
         const options = [];
         channels.forEach((channel) => {
             if (channel.type !== Constants.DM_CHANNEL) {
-                options.push(<option value={channel.id}>{channel.name}</option>);
+                options.push(
+                    <option
+                        key={'incoming-hook' + channel.id}
+                        value={channel.id}
+                    >
+                        {channel.display_name}
+                    </option>
+                );
             }
         });
 
@@ -108,26 +115,31 @@ export default class ManageIncomingHooks extends React.Component {
         const hooks = [];
         this.state.hooks.forEach((hook) => {
             const c = ChannelStore.get(hook.channel_id);
-            hooks.push(
-                <div className='font--small'>
-                    <div className='padding-top x2 divider-light'></div>
-                    <div className='padding-top x2'>
-                        <strong>{'URL: '}</strong><span className='word-break--all'>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}</span>
+            if (c) {
+                hooks.push(
+                    <div
+                        key={hook.id}
+                        className='font--small'
+                    >
+                        <div className='padding-top x2 divider-light'></div>
+                        <div className='padding-top x2'>
+                            <strong>{'URL: '}</strong><span className='word-break--all'>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}</span>
+                        </div>
+                        <div className='padding-top'>
+                            <strong>{'Channel: '}</strong>{c.display_name}
+                        </div>
+                        <div className='padding-top'>
+                            <a
+                                className={'text-danger'}
+                                href='#'
+                                onClick={this.removeHook.bind(this, hook.id)}
+                            >
+                                {'Remove'}
+                            </a>
+                        </div>
                     </div>
-                    <div className='padding-top'>
-                        <strong>{'Channel: '}</strong>{c.name}
-                    </div>
-                    <div className='padding-top'>
-                        <a
-                            className={'text-danger'}
-                            href='#'
-                            onClick={this.removeHook.bind(this, hook.id)}
-                        >
-                            {'Remove'}
-                        </a>
-                    </div>
-                </div>
-            );
+                );
+            }
         });
 
         let displayHooks;
diff --git a/web/react/components/user_settings/manage_outgoing_hooks.jsx b/web/react/components/user_settings/manage_outgoing_hooks.jsx
index e83ae3bd6c..f6d6b515b3 100644
--- a/web/react/components/user_settings/manage_outgoing_hooks.jsx
+++ b/web/react/components/user_settings/manage_outgoing_hooks.jsx
@@ -128,21 +128,42 @@ export default class ManageOutgoingHooks extends React.Component {
         }
 
         const channels = ChannelStore.getAll();
-        const options = [<option value=''>{'--- Select a channel ---'}</option>];
+        const options = [];
+        options.push(
+            <option
+                key='select-channel'
+                value=''
+            >
+                {'--- Select a channel ---'}
+            </option>
+        );
+
         channels.forEach((channel) => {
             if (channel.type === Constants.OPEN_CHANNEL) {
-                options.push(<option value={channel.id}>{channel.name}</option>);
+                options.push(
+                    <option
+                        key={'outgoing-hook' + channel.id}
+                        value={channel.id}
+                    >
+                        {channel.display_name}
+                    </option>
+                );
             }
         });
 
         const hooks = [];
         this.state.hooks.forEach((hook) => {
             const c = ChannelStore.get(hook.channel_id);
+
+            if (!c && hook.channel_id && hook.channel_id.length !== 0) {
+                return;
+            }
+
             let channelDiv;
             if (c) {
                 channelDiv = (
                     <div className='padding-top'>
-                        <strong>{'Channel: '}</strong>{c.name}
+                        <strong>{'Channel: '}</strong>{c.display_name}
                     </div>
                 );
             }
@@ -157,7 +178,10 @@ export default class ManageOutgoingHooks extends React.Component {
             }
 
             hooks.push(
-                <div className='font--small'>
+                <div
+                    key={hook.id}
+                    className='font--small'
+                >
                     <div className='padding-top x2 divider-light'></div>
                     <div className='padding-top x2'>
                         <strong>{'URLs: '}</strong><span className='word-break--all'>{hook.callback_urls.join(', ')}</span>
diff --git a/web/react/components/user_settings/user_settings_integrations.jsx b/web/react/components/user_settings/user_settings_integrations.jsx
index 1d9ea0ad5f..83a6bf53a4 100644
--- a/web/react/components/user_settings/user_settings_integrations.jsx
+++ b/web/react/components/user_settings/user_settings_integrations.jsx
@@ -37,7 +37,7 @@ export default class UserSettingsIntegrationsTab extends React.Component {
         if (global.window.mm_config.EnableIncomingWebhooks === 'true') {
             if (this.props.activeSection === 'incoming-hooks') {
                 inputs.push(
-                    <ManageIncomingHooks />
+                    <ManageIncomingHooks key='incoming-hook-ui' />
                 );
 
                 incomingHooksSection = (
@@ -68,7 +68,7 @@ export default class UserSettingsIntegrationsTab extends React.Component {
         if (global.window.mm_config.EnableOutgoingWebhooks === 'true') {
             if (this.props.activeSection === 'outgoing-hooks') {
                 inputs.push(
-                    <ManageOutgoingHooks />
+                    <ManageOutgoingHooks key='outgoing-hook-ui' />
                 );
 
                 outgoingHooksSection = (