I have been reading Dan Abramov's article react as a rendering ui and saw the term "imperative escape hatch".

My question is what is this? Can some one give an example of one and when it would be useful.

I have been reading Dan Abramov's article react as a rendering ui and saw the term "imperative escape hatch".

My question is what is this? Can some one give an example of one and when it would be useful.

• javascript
• reactjs
• puter-science

2 Answers 2

The term is referring to the bination of imperative programming and functional programming. See What is difference between functional and imperative programming languages? for a few good answers.

It can be hard to implement some solutions with a purely functional approach, but you can get close if you use mostly functional programming with some elements of imperative programming. Those elements that aren't purely functional are referred to in the linked article as "imperative escape hatches."

In purely functional programming, methods don't modify the state of the system and they always return the same output when given the same input. A function that takes a name like "Thomas" and always returns "Hello Thomas" fits that description. A function that takes a name like "Thomas", geolocates the user, and returns a regional greeting like "Howdy Thomas" or "G'day Thomas" does not fit that description.

It is possible to rewrite that second function to accept two parameters, a name and a location, and then always return the same result based on the input, thereby making it adhere to the functional paradigm. Now imagine that the greeting was based on date, month, day of week, time of day, region, and gender. In functional programming, you need to package that state up into some data structure that gets passed to the function. In effect, calling getGreeting( 'Thomas', { date: 5, month: 'Jan', dayOfWeek: 'Monday', etc. }) instead of getGreeting( 'Thomas' ) and relying on the state of the system as returned by other functions or accessed in global variables.

A more plex example is calling an asynchronous subroutine that takes varying amounts of time to plete. Let's say, getting a stock price every 2 seconds and it takes between 1 and 5 seconds to plete. Once the task is pleted, the UI should only be updated if this is the most recently sent data, not most recently received data. You don't know if the UI will have been updated based on the next stock price request before this one returns when the method is called, so this would be tricky to do with purely functional programming. You can use a little imperative escape hatch though. If you store the time that the most recently rendered request was sent in a global variable, you can easily decide when to use a returned stock price to update the UI and when to toss the slowly returned requests out.

The term in Dan Abramov's article might relate to this section of React docs: https://reactjs/docs/design-principles.html#escape-hatches.

In brief, there are cases that declarative approach of React is not applicable, hence you have to apply an imperative solution instead. Using refs in React to control ponents, e.g. for DOM manipulation, is considered imperative.