HOC.md

Doing more with HOCs

This documentation is about expanding react-dropdown-tree-select using Higher Order Components/Functions.

Table of Contents

• What are HOCs
• Why use a HOC
• Examples
  • External Select All, Unselect All buttons
  • Internal Select All Checkbox
  • Prevent re-render on parent prop/state changes
  • Tree Node Paths

What are HOCs

HOCs (or Higher Order Components/Functions) are either a React Component (or a function that returns a React Component) that are used to enhance the functionality of an existing component.

You can use HOCs to manipulate the props and state, abstract rendering logic or enable code reuse.

Why use a HOC

Or in other words, why is this functionality not baked in to the component? It's a fair question. There are many reasons but probably the biggest reason is - to Keep It Simple!

The control tries to provide a minimal, core set of features while making it easy to expand upon the core features using composition, or HOCs. This lets the component to have a very small footprint and allows you to customize/tweak or build upon as per your requirements.

Examples

These are some of the examples of expanding the core component with HOCs. They are all provided as Code Sandboxes so feel free to play with them.

If you'd like to add to these examples, create an issue with a brief description (of what the HOC does) along with a CodeSandbox link.

External Select All, Unselect All buttons

This is an example of selecting/unselecting all nodes programmatically, outside of the control.

Internal Select All Checkbox

This example shows how to add a special Select All checkbox within the dropdown itself.

Prevent re-render on parent prop/state changes

Once initialized, the component (react-dropdown-tree-select) manages its own internal state. However, if this component is part of another component, then due to React's nature, anytime the parent is re-rendered, this component will re-render. While React's Virtual DOM diffing will cancel out any ultimate DOM modifications, it'll still go through all of its initialization process. This can be a waste of computation if the tree data hasn't changed.

To prevent that, this HOC simply adds a deep equality check in its shouldComponentUpdate.

This is not baked in the component since:

• Deep equality check can be expensive if the tree is large
• Not everyone may need this check

Tree Node Paths

The onChange/onNodeToggle events bubbles up few useful properties such as _depth, _id, _parent (and _children for non-leaf nodes). Using these, you can recurse up/down to grab a node in the tree.

In addition, you can use the object path notation to grab the node without recursion. This HOC demonstrates a technique to do that.