Time travel rendering for React function component

We we often encounter reported defects about wrong UI look which probably caused by unexpected input data. There is a solution to catch unpredictable UI component behavior. Rewind of render state in React component through all previous props can help you to catch and eliminate defects caused by the unexpected input data.

Photo by Johannes Plenio from Pexels

There are cases when we get unexpected React components state but due to frequent component updates it becomes hard to catch problematic component properties and eliminate a root cause of a defect.

For instance, we can create a component that represents current outside weather 🌦.

And if we pass properties { condition: "Sunny", temperature: 24 }, we get something like this:

As you noted we added dynamic color, backgroundColor styles and transition animation for smooth changes observation.

Component styling is moved out to a separate function just for not mix up the main idea with irrelevant code.

We can wrap our React UI component into the utility layer which serves as render navigation based on props history with timestamps.

Mowing to next step, how to store all previous props of weather conditions to history. I prefer to use higher order component(HOC) style for component decoration purposes, to my mind it’s easier to define strict typing for HOC the style than for render props or rest design patterns.

Again, do not bloat the main concept with CSS styles we just move it out outside the HOC.

Before switching to the next step, I want to emphasize significant points which were taken into account for generic TimeTraveller component:

• ◀️▶️ Generics interface for flexible item types.
• 📝 Avoid redundant updates just wrap the component with React.memo.
• ↩️ Store whole history in local reference hook.
• 🖼 Store current rendering props in the local state.
• ✅ Ability to enable and disable props traveling.
• 🕹 Navigate through all history.
• 🕑 Display corresponding timestamp when a component props were received.

Using React.useEffect hooks we are tracking changes and apply corresponding changes🎣:

• Add new props to history and render them immediately when navigation is disabled.
• Update maximal slider value according to history item count.
• Listen to checkbox state and update rendering props with history or with the latest actual data.
• Listen to a slider position change and choose the appropriate item from history.

So after added functionality for navigation in our code, it has the next look:

• Checkbox - toggle time-traveling feature;
• Slider - navigate through all passed props;
• timestamp - time when displayed props were received.

Of course, instead of milliseconds, timestamp can be represented as UTC String or ISO String or any other format that would be convenient for a specific case.

Now connect previous created Weather component with TimeTraveller navigation.

So here TimeTravellerWeather HOC is created. Few random weather conditions are passed for forecast presentation with 5000 milliseconds interval ⏱.

And as a result “Time traveling rendering” is ready for tries 👀:

CodeSandbox

Such a simple wrapper utility could help you to debug our React applications during components development or fixing bugs related to input data and components behavior on that data.