Dynamically change hooks after first render

[dashed]

I was playing with this library on a toy side-project, and I noticed I cannot dynamically change hooks, especially after the first render.

The gist of the code I had is as follows:

import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

import { compose, withState } from "recompose";

// fake data generator
const getItems = count =>
    Array.from({ length: count }, (v, k) => k).map(k => ({
        id: `item-${k}`,
        content: `item ${k}`,
        type: generateType(k)
    }));

// ...

const onDragEnd = setCards => result => {
    // dropped outside the list
    if (!result.destination) {
        return;
    }

    setCards(prevCards => {
        const nextCards = reorder(
            prevCards,
            result.source.index,
            result.destination.index
        );
        return nextCards;
    });
};

const Board = props => {
    const { cards, setCards } = props;

    return (
        // NOTE: unable to replace onDragEnd after first render
        <DragDropContext onDragEnd={onDragEnd(setCards)}>
            <Droppable droppableId="droppable">
                {generateBoard(cards)}
            </Droppable>
        </DragDropContext>
    );
};

const cardsState = withState("cards", "setCards", getItems(10));

export default compose(cardsState)(Board);

Even though the drag and drop (which is awesome by the way) appears to work fine, after the first render, the generated function from onDragEnd(setCards) is not replaced within DragDropContext.

This is likely to do with the fact there is no componentWillReceiveProps() (or similar) at

react-beautiful-dnd/src/view/drag-drop-context/drag-drop-context.jsx

Lines 17 to 46 in 0f557e0

	export default class DragDropContext extends Component {
	/* eslint-disable react/sort-comp */
	props: Props
	store: Store
	// Need to declare childContextTypes without flow
	// https://github.com/brigand/babel-plugin-flow-react-proptypes/issues/22
	static childContextTypes = {
	[storeKey]: PropTypes.shape({
	dispatch: PropTypes.func.isRequired,
	subscribe: PropTypes.func.isRequired,
	getState: PropTypes.func.isRequired,
	}).isRequired,
	}
	/* eslint-enable */
	componentWillMount() {
	this.store = createStore(this.props);
	}
	getChildContext(): Context {
	return {
	[storeKey]: this.store,
	};
	}
	render() {
	return this.props.children;
	}
	}

---

Even though the above example uses recompose, one may refactor the above to use redux and friends (e.g. react-redux), whereby the developer can pass dispatch (or a binded dispatch) to onDragEnd(). You cannot really assume dispatch won't change after the first render.

[alexreardon]

This behaviour is currently not supported:

Dynamic hooks

Your hook functions will only be captured once at start up. Please do not change the function after that. If there is a valid use case for this then dynamic hooks could be supported. However, at this time it is not.

-> README.md

The functions are passed onto a redux middleware at startup and not looked at again. This could be improved for sure. This looks like a valid use case.

[alexreardon]

This should be fairly easy to do - we just need to move away from using a redux middleware and set up a subscription to the store within the DragDropContext component.

[alexreardon]

I am fiddling with this while away :)

[alexreardon]

This has now shipped @dashed. Enjoy!

[dashed]

@alexreardon thanks for taking the time to look into this! 😄 I'll definitely check it out.