title: React & TypeScript: Avoid context default value
body: <p>In the effort to better learn React, TypeScript, and Context / Hooks, I'm making a simple Todo app. However, the code needed to make the context feels cumbersome.</p>
  
  <p>For example, if I want to change what a Todo has, I have to change it in three places (ITodo interface, default context value, default state value). If I want to pass down something new, I have to do that in three places (TodoContext, TodoContext's default value, and value=). Is there a better way to not have to write so much code?</p>
  
  <pre><code>import React from 'react'
  
  export interface ITodo {
      title: string,
      body?: string,
      id: number,
      completed: boolean
  }
  
  interface TodoContext {
      todos: ITodo[],
      setTodos: React.Dispatch&lt;React.SetStateAction&lt;ITodo[]&gt;&gt;
  }
  
  export const TodoContext = React.createContext&lt;TodoContext&gt;({
      todos: [{title: 'loading', body: 'loading', id: 0, completed: false}],
      setTodos: () =&gt; {}
  })
  
  export const TodoContextProvider: React.FC&lt;{}&gt; = (props) =&gt; {
      const [todos, setTodos] = React.useState&lt;ITodo[]&gt;([{title: 'loading', body: 'loading', id: 0, completed: false}])
  
      return (
          &lt;TodoContext.Provider value={{todos, setTodos}}&gt;
              {props.children}
          &lt;/TodoContext.Provider&gt;
      )
  }
  </code></pre>