DEV Community: Timo Prüße

React: Stacking Context

Timo Prüße — Wed, 08 Apr 2020 08:46:41 +0000

Just the other day, I encountered an unusual challenge when working with the React Context API. I’m eager to share what I learned and how I worked around the restrictions that it has.

Scenario

Take a look at the following simplified code snippet:

The context’s value is dependant on the name prop. That means the values for outer_context and inner_context differ.

Problem

The most inner component ComponentThatUsesContextFromBothProviders needs the values of both context providers it is wrapped in. However, by default, it is only possible for us to get the context of the closest provider, which would be inner_context in this case.

First things that might come to your mind now are:

Pass the value of the outer context as a prop to the inner component

We don’t want to do that because we would end up with prop drilling again in more complex scenarios where we would need to pass it down the whole tree. The React team introduced the Context API to prevent precisely that.

Use some kind of state management

We don’t want to overcomplicate things with state management since our use case is straightforward, and we don’t want to pollute our global state. Only the components wrapped inside of the context providers need to know their values.

Solution

Finding a leverage point

The value of our context is dependant on the name prop we set for the provider. That means the context that is computed for each name should be different. We know that we might need all of the individual key/value pairs when a component is wrapped inside of multiple providers.

How does that help us?

Oversimplified our structure needs to look like this to provide that functionality:

outer_context -> Component A -> inner_context -> Component B

Component A Context = { outer_context: 'outer_value' }

Component B Context = {
  outer_context: 'outer_value',
  inner_context: 'inner_value'
}

Maybe you did already see where I’m heading with this. As the title of this article suggests, it makes sense to stack our context in that case. If we now introduce a new component C, it needs to have all the context of the component B plus the new context that is provided.

How can we achieve a stacking context?

It’s just a few lines of code as seen in the following snippet:

There’s no magic involved. Instead of saving the context’s value directly, we create an object that is indexed by the name prop in this example. Every context provider now only needs to use the existing context and ‘push’ it’s own value to the stack. Now we can get the values like this:

You can also create a custom hook to make it more convenient to get the value and handle the case of a non-existent key.

Conclusion

Sometimes it makes sense to ‘bend’ the React world a bit and break out of the boundaries set by it. Do what fits best to the scope of your project. Just remember that everything is just JavaScript in the end. ;)

Benefits of using Dart (and Flutter)

Timo Prüße — Mon, 17 Feb 2020 18:54:55 +0000

Programmers don’t like to deal with stuff that is not directly related to their actual problems that they’re trying to solve. So the more comfortable it is to use a programming language, the easier it is to focus on the substantive difficulties.

The following list shows different ways that support you in writing maintainable code quickly when using Dart.

Extensions

When working with third-party libraries, you often wish that a certain functionality exists. In most cases, it’s tightly coupled to the current project and wouldn’t qualify as a pull-request to the library’s repository. In Dart, it is possible to extend third-party libraries.

Furthermore, it’s even possible to extend native types like String or List.

You can also utilize generics. Check out the code snippet below:

By extending the capabilities of the language, it is also more comfortable for your colleagues to find the new functionalities you implemented. They don’t have to check some directory you probably named ‘util’ or in a similar fashion. When working with the code, they’ll explore all the new bits naturally through their IDE (auto-complete / auto-suggest).

Named Parameters

Don’t we all always have to look up parameters for specific functions or methods? When using Dart, you can define named parameters. These are a convenient way to make your API more natural to use. However, it can also encourage lousy design decisions by overloading functions with a ton of parameters. Just beware not to go overboard with it. Just use it as a tool to make your code more readable and easier to use!

If you want to declare a parameter as necessary for the execution of the function, you can add an annotation (see @required in the code example below).

Named Constructors

Named constructors can come in handy when an object typically gets constructed with the same parameters in multiple places. Or maybe you want to make it more clear what exactly you’re initializing.

LINQ-like Collection Methods

‘Language-Integrated Query (LINQ) is the name for a set of technologies based on the integration of query capabilities directly into the C# language.’

— Microsoft C# documentation

Take a look at the following example:

It feels natural, and you instantly know what the code achieves here. There are a lot more convenient methods that you’ll automatically find when writing your code. Yet, you might notice the ‘.toList()’ method. That is required because Iterables are lazy in Dart and we have to convert it to a list.

Operator Overloading

Merging multiple objects is a common task in web programming. Make your life easier and overload the operators! You decide what happens when someone tries to interact with your objects. This way, your colleagues can use your objects within the natural constraints of the language. They don’t need to worry about deep-merging or other issues.

Streams / StreamBuilder

Handling with asynchronicity is always a source of frustration. Instead of only knowing when a promise got resolved or rejected, we also get the current progress of the function with streams. Writing good user interfaces is extremely straightforward because you can always communicate the current state to the user. With streams, you get constant feedback for free.

The StreamBuilder is a Flutter widget that makes dealing with streams smooth. If you’re only interested in the outcome of an asynchronous function, you can stick to Futures, which work precisely like Promises in JavaScript.

Optimizations included

In web apps, you usually reach for Webpack or similar tools to bundle your codebase for production. The setup can become very cumbersome and hard sometimes. Dart includes optimizations like tree-shaking out-of-the-box. You don’t need to configure anything as opposed to all the other tools that claim that they are ‘zero-config’.

Compile it to ANYTHING

With the help of Flutter, it’s possible to compile your codebase to work with various platforms (Android, iOS, Web, macOS, Linux, Windows). However, the native implementations (macOS, Linux, Windows) are still in alpha or technical preview status.

The Flutter team has implemented all of the native control elements from scratch. That means that you can write an app that looks the same on iOS and Android. So you can use Material Design widgets for iOS and vice-versa. Of course, it’s also possible to have distinct widgets for each platform. It is an excellent example of WYSIWYG because of the custom implementation of the renderer (Skia).

Insanely fast Hot-Reload

You’ll love Flutter’s hot-reload feature right away. This mechanic exists in other frameworks like React, too. Nevertheless, they currently can’t compete with the one in Flutter. E.g., if you change a color, the change is displayed immediately. There’s not even a sign of a hot-reload taking place. It is a feature that you have to see with your own eyes.

Conclusion

With Dart, it’s possible to keep a fast pace while developing your app and still produce maintainable code. All the listed benefits automatically decrease the barrier for your colleagues to understand your intentions. If you’re currently using TypeScript or a comparable language, it’s worth a try to implement Dart in one of your new projects. You’ll feel an improvement even if only a subset of the advantages mentioned in this article concerns you.