Troy's edits Merge pull request #1 from tmr08c/tmr08c-suggestions-for-react-context-post

Makes a few small edits to React Context Post

Author: basicBrogrammer

content/articles/when-a-simple-react-context-gets-out-of-hand.md

@@ -75,16 +75,16 @@ Let's go ahead and solve that in the `TimelineContext`.
 ```javascript
   const TimelineContextProvider = ({ children }) => {
     const [posts, setPosts] = useState([]);
-    const [ selectedPost, setSelectedPost] useState(null)
-    const [ selectedComment, setSelectedComment] useState(null)
+    const [selectedPost, setSelectedPost] = useState(null)
+    const [selectedComment, setSelectedComment] = useState(null)
 
     const state = { posts, selectedPost, selectedComment };
     const actions = { setPosts, setSelectedPost, setSelectedComment }
 
     return (
-      <AuthContext.Provider value={{ state, actions}}>
+      <TimelineContext.Provider value={{ state, actions}}>
         {children}
-      </AuthContext.Provider>
+      </TimelineContext.Provider>
     );
   };
 ```
@@ -104,8 +104,8 @@ This is fairly simple. We can just throw in a `useEffect` and boom.
 ```javascript
   const TimelineContextProvider = ({ children }) => {
     const [posts, setPosts] = useState([]);
-    const [ selectedPost, setSelectedPost] useState(null)
-    const [ selectedComment, setSelectedComment] useState(null)
+    const [selectedPost, setSelectedPost] = useState(null)
+    const [selectedComment, setSelectedComment] = useState(null)
 
     const state = { posts, selectedPost, selectedComment };
     const actions = { setPosts, setSelectedPost, setSelectedComment }
@@ -126,7 +126,7 @@ This is fairly simple. We can just throw in a `useEffect` and boom.
 
 Now let's say for testing purposes we want to add initial{SelectedPost and SelectedComment}. Stupid simple. Or is it?
 
-The way we currently have it set up, the useEffect will set our `initialSelectedComment` to null on the first render. OOOO no a side useEffect!!!
+The way we currently have it set up, the `useEffect` will set our `initialSelectedComment` to `null` on the first render. OOOO no a side useEffect!!!
 
 So our context then turns into:
 
@@ -212,7 +212,7 @@ Not a huge win IMO, but now the team is happier.
 
 After working with React hooks for a year, I've come to the conclusion that `useEffect` in a context is probably a bad idea. (I'd love to see examples where you've made this work BTW).
 
-A more concrete rule that I've landed on is that we should not have a useEffect in our app that relies on global state. I kind of see this a sharp knife that could easily poke your eye out. It raises the barrier to work on a project for people that don't work in the frontend day in and day out. Even for someone working in the codebase, it's something they always have to keep in the back of their mind. "If I change {X}, this callback will run, and do I need to modify it?".
+A more concrete rule that I've landed on is that we should not have a `useEffect` in our app that relies on global state. I kind of see this a sharp knife that could easily poke your eye out. It raises the barrier to work on a project for people that don't work in the frontend day in and day out. Even for someone working in the codebase, it's something they always have to keep in the back of their mind. "If I change {X}, this callback will run, and do I need to modify it?".
 
 My solution to this is to always (well prolly 95% of the time) use `useReducer` in global state and to never have a `useEffect` depend on a piece of global state.
 
@@ -229,7 +229,7 @@ const initialState = {
 };
 ```
 
-Well, that was easy enough! Defining our initial state lets us see all of our global state at a glance. Any time we want to add something to our global state, we can start by adding a sensible default to our initialState object. For example, `isLoggedIn` is initially false, and `posts` is initially an empty array.
+Well, that was easy enough! Defining our initial state lets us see all of our global state at a glance. Any time we want to add something to our global state, we can start by adding a sensible default to our `initialState` object. For example, `isLoggedIn` is initially false, and `posts` is initially an empty array.
 
 ## Reducery, my dear Watson
 
@@ -331,11 +331,11 @@ const AppProvider = ({ initialState, reducer, children }) => {
 };
 ```
 
-Well, that's a lot cleaner. My team works in a [Rails](https://rubyonrails.org/) monolith which is why I've decided to have `initialState` and the `reducer` to be props for the AppProvider. This approach allows us to use the same provider for any React app that we decide to create.
+Well, that's a lot cleaner. My team works in a [Rails](https://rubyonrails.org/) monolith which is why I've decided to have `initialState` and the `reducer` be props for the `AppProvider`. This approach allows us to use the same provider for any React app that we decide to create.
 
 # Conclusion
 
-Currently, this is my favorite way to [with some extra magic I'll blog about later] to manage global state in a React app.
+Currently, this is my favorite way to [with some extra magic I'll blog about later] manage global state in a React app.
  - No added dependencies.
  - No side effects on global state that have to be memorized.
  - Each interation is mapped to a single encapsulated action.