I have written before about the strategy of creating tension in storytelling – and I get that it might seem abstract so I wanted to share a concrete example (a tactic!) of one way to create tension in teaching technical content.

I am reviewing an upcoming Pluralsight course that deals with React and the author does a fantastic job of using tension to make the course compelling to watch, and it's very simple.

Beginning with the learning objective:

Demonstrate how to create child components in the Next.js app router

The author employs a pattern I will just call the Wrong Way First method. This tactic works really well when the wrong way will create tension with the learner if they are already familiar with the right way.

Here's how the author designed the flow.

First, they begin by demonstrating how to create a page that displays a list of entities:

import items from '../data/items.json'

export default function List() {
  function renderItemDetails(item) {
    return (
      <div>
        <Image src={`/images/items/${item.id}.jpg`} />
        <span>{item.name}</span>
      </div>
    )
  }
  
  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {renderItemDetails(item)}
          </li>
        ))}
      </ul>
    </div>
  )
}

As they walk through this example, they introduce this local function to render item details.

Any seasoned React developer will look at this code and ask themselves:

Wait, why are they creating a local function here to render? Shouldn't it be a component?

Now tension is created because they end the clip with this code. It leaves an "open loop" in the learner's mind – and we as humans crave to close open loops. It's why you binge Too Hot to Handle on Netflix.

This tactic works well in this case because the tension is created before revealing to the learner its purpose.

The clip this is shown in is part of a previous learning objective (related to rendering JSX in pages), which makes the learner want to know what happens next (to close the loop).

The important part when teaching is to make sure to release the tension. The art in storytelling is deciding how long to wait.

In this case, the author releases the tension immediately at the beginning of the next clip which covers the child component learning objective. They demonstrate how to extract that inline function into a proper child component (and where to put it).

The narration is important here because you want to validate the feelings/intelligence of the learner:

"Now an inline function here is not really the way you'd do this. Ideally, we'd want a child component, so how does that work in app router?"

That's not exactly what they said but it's the gist. I often employ validation by verbalizing their inner monologue (or what I expect is their inner monologue) like this:

"You were probably thinking an inline function here is the wrong way to go about this – and you'd be right! We should extract this into a child component but the question is: where should it go?"

I like this tactic a lot because it works for both beginners who may not be familiar with the "right way" to do something and it works for experienced learners who are.

For a beginner, it doesn't so much create tension as it does surprise (an "aha moment") so I wouldn't necessarily employ the tactic when teaching brand new concepts that learners may be unfamiliar with beforehand.

In this case, a React developer would be familiar with the appropriate way to write apps using child components before taking the course (which is why it's so important to define your learner prereqs upfront).

Have a lovely day,
Kamran