React Hooks Common Mistakes

React Hooks is a new addition to React which enables you to use state and other features of the library without having to create a class. By ‘hooking into’ React’s existing features, you can significantly reduce the number of concepts you have to grapple with, and you can create custom hooks to share all kinds of non-visual logic, making your code much more reusable.


Managing State with React

This article is part of a blog series in which we look at back at five years of React usage at Instana. State management is one of the essential aspects of React application architectures. Over the years, we certainly learned a lot about it. This blog post will provide insights into our current state management approaches. Let’s begin with a controversial point first: We don’t use Redux! Redux did not yet exist when we started Instana.


How and why we chose React

This article is part of a blog series in which we look at back at five years of React usage at Instana. Most of the early Instana employees moved to Instana from a German software consultancy called codecentric. These first employees experimented, used and trained customers in various UI libraries and frameworks while working for this consultancy. This background allowed us to have a broad understanding of the web development space and Zeitgeist.


Looking back at five years of React at Instana

This article marks the start of an article series in which we would like to look back at one of our earliest technology choices: The selection of React. React is being used since day one as our core UI library to develop Instana’s user interface. Since Instana recently celebrated its fifth birthday, we believe that this is an excellent opportunity to reflect on this architecture decision.


Migrating Grafana's template variables from AngularJS to React: A tale of failures and wins

As many of you already know, we created Grafana using AngularJS, but we have been migrating to React for about two years now. One of the big missing pieces in our migration puzzle was the templating system. This post starts in late 2019 when I first got my hands on this mysterious and complex area of the Grafana code base.


Challenges Monitoring ReactJS Applications

ReactJS combines the speed of JavaScript with unique rendering capabilities to make applications that are highly dynamic, performance oriented, and responsive to user input. State of JS report 2018 cites performance as the major reason ReactJS has gained so much popularity in such a short time. When it comes to options for building single-page applications (SPAs), React delivers performance advantages over Angular and other JavaScript frameworks and libraries.


How to remove Recompose and replace with Hooks

In our last post, we explored the pros and cons of Recompose and why we decided to remove it from our codebase. This post includes the strategy we used to approach the large task of implementing that refactor. It’s important to note that this strategy was created to fit our specific situation and is not a one size fits all approach to removing Recompose. Specifically, it was intended to work with our large codebase that is modified by our devs daily.


Replacing Recompose with React Hooks

Recompose is a React utility belt for function components and higher-order components that has been very useful to our frontend engineering team. After more than three years of working with it, we’ve identified a lot of pain points. In October 2018, the React team introduced Hooks which shipped with React v16.8 and provided an alternative to HOCs.