[hooks] Allow changing cursor path dynamically

docs/hooks.md

@@ -228,7 +228,7 @@ const List = function(props) {
   // Using a function so that your cursors' path can use the component's props etc.
   const {colors} = useBranch({
     colors: [props.alternative ? 'alternativeColors' : 'colors']
-  });
+  }, [props.alternative]);
 
   function renderItem(color) {
     return <li key={color}>{color}</li>;
@@ -240,6 +240,8 @@ const List = function(props) {
 export default List;
 ```
 
+Note that you need to pass an array of dependencies as a second argument. If dependencies are not specified, the path will not be re-computed.
+
 ### Clever vs. dumb components
 
 Now you know everything to use a Baobab tree efficiently with React.

src/hooks.js

@@ -41,7 +41,7 @@ export function useRoot(tree) {
   return state;
 }
 
-export function useBranch(cursors) {
+export function useBranch(cursors, deps) {
   if (!isPlainObject(cursors) && typeof cursors !== 'function')
     invalidMapping(name, cursors);
 
@@ -63,14 +63,19 @@ export function useBranch(cursors) {
     const mapping = typeof cursors === 'function' ? cursors(context) : cursors;
     const watcher = context.tree.watch(mapping);
 
-    watcher.on('update', () => {
+    const updateValue = () => {
       const obj = watcher.get();
       obj.dispatch = (fn, ...args) => fn(context.tree, ...args);
       setState(obj);
-    });
+    };
+
+    // cursors have changed - update value immediately
+    updateValue();
+
+    watcher.on('update', updateValue);
 
     return () => watcher.release();
-  }, [cursors]);
+  }, deps || []);
 
   return state;
-}
+}

test/hook.jsx

@@ -154,7 +154,7 @@ describe('Hook', function() {
             name: ['name'],
             surname: props.path
           };
-        });
+        }, [props.path]);
         return (
           <span>
             Hello {data.name} {data.surname}