diff --git a/packages/docs-components/src/knobs/KnobContexts.ts b/packages/docs-components/src/knobs/KnobContexts.ts
index 16385cc688..0982c11e95 100644
--- a/packages/docs-components/src/knobs/KnobContexts.ts
+++ b/packages/docs-components/src/knobs/KnobContexts.ts
@@ -10,11 +10,11 @@ export type KnobContextValue = {
   unregisterKnob: (knobName: KnobName) => void
 }
 
-export type LogContextValue = {
+export type LogContextFunctionsValue = {
   appendLog: (value: string) => void
   clearLog: () => void
-  items: string[]
 }
+export type LogContextItemsValue = string[]
 
 const noop = () => null
 
@@ -27,8 +27,8 @@ export const KnobContext = React.createContext<KnobContextValue>({
   unregisterKnob: noop,
 })
 
-export const LogContext = React.createContext<LogContextValue>({
+export const LogContextFunctions = React.createContext<LogContextFunctionsValue>({
   appendLog: noop,
   clearLog: noop,
-  items: [],
 })
+export const LogContextItems = React.createContext<LogContextItemsValue>([])
diff --git a/packages/docs-components/src/knobs/KnobProvider.tsx b/packages/docs-components/src/knobs/KnobProvider.tsx
index e99d82793d..dfb22a1d44 100644
--- a/packages/docs-components/src/knobs/KnobProvider.tsx
+++ b/packages/docs-components/src/knobs/KnobProvider.tsx
@@ -1,7 +1,13 @@
 import * as React from 'react'
 
 import defaultComponents from './defaultComponents'
-import { KnobContext, KnobContextValue, LogContext, LogContextValue } from './KnobContexts'
+import {
+  KnobContext,
+  KnobContextValue,
+  LogContextFunctions,
+  LogContextFunctionsValue,
+  LogContextItems,
+} from './KnobContexts'
 import { KnobComponents, KnobDefinition, KnobName, KnobSet } from './types'
 
 type KnobProviderProps = {
@@ -55,11 +61,16 @@ const KnobProvider: React.FunctionComponent<KnobProviderProps> = props => {
     }),
     [knobs, components],
   )
-  const logValue: LogContextValue = React.useMemo(() => ({ appendLog, clearLog, items }), [items])
+  const logValue: LogContextFunctionsValue = React.useMemo(() => ({ appendLog, clearLog }), [
+    appendLog,
+    clearLog,
+  ])
 
   return (
     <KnobContext.Provider value={knobValue}>
-      <LogContext.Provider value={logValue}>{children}</LogContext.Provider>
+      <LogContextFunctions.Provider value={logValue}>
+        <LogContextItems.Provider value={items}>{children}</LogContextItems.Provider>
+      </LogContextFunctions.Provider>
     </KnobContext.Provider>
   )
 }
diff --git a/packages/docs-components/src/knobs/LogInspector.tsx b/packages/docs-components/src/knobs/LogInspector.tsx
index 21e2da3146..6c4fbe964b 100644
--- a/packages/docs-components/src/knobs/LogInspector.tsx
+++ b/packages/docs-components/src/knobs/LogInspector.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { KnobContext, LogContext } from './KnobContexts'
+import { KnobContext, LogContextFunctions, LogContextItems } from './KnobContexts'
 
 type LogInspectorProps = {
   /** Will be hidden if is empty. */
@@ -8,7 +8,9 @@ type LogInspectorProps = {
 
 const LogInspector: React.FunctionComponent<LogInspectorProps> = props => {
   const { components } = React.useContext(KnobContext)
-  const { clearLog, items } = React.useContext(LogContext)
+
+  const { clearLog } = React.useContext(LogContextFunctions)
+  const items = React.useContext(LogContextItems)
 
   const visible = props.silent ? items.length > 0 : true
 
diff --git a/packages/docs-components/src/knobs/types.ts b/packages/docs-components/src/knobs/types.ts
index 31778d5a39..57b5a8608e 100644
--- a/packages/docs-components/src/knobs/types.ts
+++ b/packages/docs-components/src/knobs/types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { LogContextValue } from './KnobContexts'
+import { LogContextFunctionsValue, LogContextItemsValue } from './KnobContexts'
 
 export type KnobDefinition = {
   content?: React.ReactNode
@@ -40,7 +40,9 @@ export type KnobRangeKnobComponentProps = KnobComponentProps & {
   unit: string
 }
 
-export type LogInspectorProps = Pick<LogContextValue, 'clearLog' | 'items'>
+export type LogInspectorProps = Pick<LogContextFunctionsValue, 'clearLog'> & {
+  items: LogContextItemsValue
+}
 
 export type LogFormatter<T extends any[] = any[]> = (name: string, ...args: T) => string
 
diff --git a/packages/docs-components/src/knobs/useLogKnob.ts b/packages/docs-components/src/knobs/useLogKnob.ts
index b351a01006..cfa491f84e 100644
--- a/packages/docs-components/src/knobs/useLogKnob.ts
+++ b/packages/docs-components/src/knobs/useLogKnob.ts
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
-import { LogContext } from './KnobContexts'
-import { LogFormatter } from '@fluentui/docs-components'
+import { LogContextFunctions } from './KnobContexts'
+import { LogFormatter } from './types'
 
 const defaultFormatter: LogFormatter = (name: string) =>
   `${new Date().toLocaleTimeString()}: ${name}`
@@ -11,17 +11,16 @@ const useLogKnob = <T = (...args: any[]) => any>(
   callback?: T,
   formatter: LogFormatter = defaultFormatter,
 ): T => {
-  const { appendLog } = React.useContext(LogContext)
+  const { appendLog } = React.useContext(LogContextFunctions)
 
   const proxy = React.useCallback<any>(
     (...a) => {
       appendLog(formatter(name, ...a))
+
       if (typeof callback === 'function') {
         return (callback as any)(...a)
       }
-      if (process.env.NODE_ENV !== 'production') {
-        console.log(`Please provide a function to "useLogKnob(${name}, callback)"`)
-      }
+
       return null
     },
     [appendLog, callback, name, formatter],