Skip to content

Potential naming/documentation improvements for useStore and setEdges/setNodes #1002

@Sec-ant

Description

@Sec-ant

Here are two points that I think could be improved, based on my own experience adopting the library:

  1. The useStore exported from @xyflow/react can be easily confused with the useStore exported from zustand. Since React Flow uses zustand internally and also provides zustand introductions on the website, this confusion can become even stronger. In some documentation pages where the context is missing, it’s not always clear which useStore is being referenced. However, these two hooks are not the same thing and have different function signatures. In our project, to keep things clear for myself and my colleagues, I usually write:

    import { useStore as useReactFlowStore } from "@xyflow/react";
  2. The names setEdges and setNodes returned by useReactFlow() are very easy to confuse with the React state setters you get from useState() (and the setNodes returned by useNodesState()). In the reference examples for useNodesState(), applyEdgeChanges(), and applyNodeChanges(), the setEdges/setNodes used there are indeed the React state setters (or the setter from useNodesState()), not the methods from useReactFlow(). Because both use the same names, it can be hard for users who are skimming or jumping between pages (especially those trying to figure out how to use the component in a controlled mode) to realize that the setEdges/setNodes from useReactFlow() do not behave like React state setters—they transform the input into edgeChanges/nodeChanges and then apply those changes.

If renaming is not realistic, perhaps some clarifications in the docs could help.

Just my two cents :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions