Update crash course

docs/tut/crash-course/5-effect.md

@@ -1,45 +1,75 @@
 # Effect
 
-An effect is a function that is run anytime a source updates. They are called
-effects because they can produce side-effects when reacting to source changes.
+Effects are functions that are ran in response to source updates. They are
+alled effects because they cause *side-effects* when reacting to source updates.
 
 Effects are created using `effect()`.
 
 ```lua
-local vide = require(vide)
 local source = vide.source
 local effect = vide.effect
 
-local function Counter()
-    local count = source(0)
+local count = source(0)
 
-    effect(function()
-        print("count has updated to: " .. count())
-    end)
+effect(function()
+    print("count: " .. count())
+end)
 
-    return create "TextButton" {
-        Position = UDim2.fromOffset(300, 300),
-        Size = UDim2.fromOffset(200, 50),
-
-        Text = count,
-
-        Activated = function()
-            count(count() + 1)
-        end
-    }
-end
-
-mount(function() return create "ScreenGui" { Counter {} } end, game.StarterGui)
+-- "count: 0" printed
+count(1)
+-- "count: 1" printed
 ```
 
-This will print to the terminal anytime the count is changed.
+The callback given to `effect()` is ran in a *reactive-scope*. Any source read
+from inside a reactive scope will be tracked, so that if any of those sources
+update, the effect will be re-ran too.
 
-`effect()` creates an explicit side-effect. There are other side-effects in the
-above code sample. The setting of `Text = count` creates another side-effect;
-the updating of the Text property anytime the count is changed.
+The callback is first ran immediately inside the `effect()` call to initially
+figure out what sources are being used.
 
-All observable changes to the user are considered to be side-effects of the
-reactive system.
+Effects also work with derived sources, it doesn't matter how deeply nested a
+source is.
+
+```lua
+local source = vide.source
+local effect = vide.effect
+
+local count = source(1)
+
+local doubled = function()
+    return count() * 2
+end
+
+effect(function()
+    print("doubled count: " .. doubled())
+end)
+
+-- "doubled count: 2" printed
+count(2)
+-- "doubled count: 4" printed
+```
+
+Derived sources should be a *pure computation*. A pure computation is one where
+the same input will always produce the same output.
+
+All observable changes to the user are considered to be side-effects of pure
+computations.
+
+Sources, derived sources, and effects form what is called a *reactive graph*.
+In the above example a graph `count -> doubled -> effect` is formed. Anywhere
+an update occures, everything further down the graph is updated.
 
 You should not update other sources using an effect. Improper usage can lead to
-unecessary updates and infinite loops.
+a cyclic loop in the graph, causing an infinite loop when it tries to update.
+Sources should be derived instead.
+
+## Root Reactive Scopes
+
+Effects must be created within another reactive scope. This is so that the
+effect itself can be tracked and later freed when the parent reactive scope is
+destroyed, such as from unmounting an app. The example code above will not
+actually work unless it is ran inside a root reactive scope, such as one created
+by `vide.mount(function)`. This generally isn't a concern since you can assume
+that all your components will be created within a single `mount()` call, which
+happens only once at the top level, where you put together your UI and parent it
+to a ScreenGUI.