A Supervision Tree in Elixir has quite a number of parallels to how developers using React think about a component tree. In this article, we will attempt to describe parallel concepts between the two – Elixir Supervision Trees vs. React Component Trees.
- One of the main building blocks in OTP is isolating processes so that they act (and fail) independently. When a new process is spawned in Elixir, it is common to monitor it with a Supervisor, so that if an error happens, the reason can be logged or sent to an error reporting service. The parallel in React, which we can find in the conceptual model of the React component tree is where a (Parent) Component renders one of its children, it can catch the error with
componentDidCatchand similarly log or send an error report.
- In React Component Trees, the flow of data is one-way, from parent to child(ren). The parent component can also pass functions as props, which would enable the child component to respond back to the parent. In an Elixir Supervision Tree, a child process can be linked to the parent process, allowing the parent to be sent a message when something happens, for example, when the process finishes what it was doing.
- Elixir Supervision Trees also utilise the tree structure to make guarantees around availability and isolation – key concepts as part of OTP. A supervision tree isolates each node and set of nodes so that it can both easily recover when things go wrong. Similarly, in a React Component Tree, as I mentioned earlier, errors can be caught with
componentDidCatchlifecycle method – and one day a hook – at various points in the tree to stop the whole page from crashing, making the entire page unusable.
If something is still unclear to you, read here more.
Reading out Storybook with React and Redux can also be helpful for you.