DEV Community: João Pedro

Feature Flags in React.js: Boosting Quality, Confidence, and Solving the Hardest Problem in Computer Science

João Pedro — Sun, 16 Feb 2025 22:43:34 +0000

Feature flags are a powerful technique that can dramatically improve software quality, developer confidence, and even marketing strategies. By allowing developers and product teams to toggle features on and off dynamically, feature flags reduce deployment risks, enable A/B testing, and facilitate gradual rollouts. However, implementing feature flags incorrectly—especially in a React frontend—can introduce performance issues like layout shifts and instability.

In this article, we will explore a server-side feature flag approach in a React.js application that eliminates these problems while enhancing quality and confidence.

Why Feature Flags Should Be Server-Side (Not Frontend)

A common mistake in React applications is implementing feature flags directly in the frontend, such as storing them in local state or using client-side feature flag services. While this may seem convenient, it introduces several challenges:

Layout Shifts and Jank: If feature flags are fetched asynchronously in the frontend, the UI may render without knowing which features are available, leading to elements appearing or disappearing unexpectedly.
Flickering Issues: Users might momentarily see disabled features before the flag values load, creating a poor user experience.
Security Concerns: If feature flags are stored in the frontend, users could inspect them in the browser and manually enable hidden features.

By using a server-side approach, we eliminate these issues by ensuring that the frontend receives the correct flags before rendering the UI.

Implementing Server-Side Feature Flags in React

The best way to manage feature flags is through a backend service that provides them dynamically. Let’s walk through how to do this with a simple Node.js + Express backend and a React frontend.

1. Setting Up the Feature Flag API

First, create a simple backend that serves feature flags to the frontend (you can also use an external library such as Firebase, LaunchDarkly, ConfigCat, etc).

// server.js (Node.js + Express)
const express = require('express');
const app = express();
const PORT = 4000;

// Simulated feature flag storage
const featureFlags = {
  newDashboard: true,
  experimentalSearch: false
};

app.get('/api/feature-flags', (req, res) => {
  res.json(featureFlags);
});

app.listen(PORT, () => console.log(`Feature flag server running on http://localhost:${PORT}`));

2. Creating a Feature Flag Hook in React

Instead of calling the API in multiple components, we create a custom hook to fetch the flags once and store them globally.

// src/hooks/useFeatureFlags.js
import { useState, useEffect } from 'react';

const API_URL = 'http://localhost:4000/api/feature-flags';

export function useFeatureFlags() {
  const [flags, setFlags] = useState({});
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchFlags() {
      try {
        const response = await fetch(API_URL);
        const data = await response.json();
        setFlags(data);
      } catch (error) {
        console.error('Error fetching feature flags:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchFlags();
  }, []);

  return { flags, loading };
}

3. Using React Context for Global Access

To prevent multiple API calls, we store the flags in a React Context.

// src/context/FeatureFlagContext.js
import { createContext, useContext } from 'react';
import { useFeatureFlags } from '../hooks/useFeatureFlags';

const FeatureFlagContext = createContext();

export function FeatureFlagProvider({ children }) {
  const { flags, loading } = useFeatureFlags();

  return (
    <FeatureFlagContext.Provider value={{ flags, loading }}>
      {children}
    </FeatureFlagContext.Provider>
  );
}

export function useFlags() {
  return useContext(FeatureFlagContext);
}

4. Integrating Feature Flags into the Application

Now, we use the feature flags to conditionally render components.

// src/App.js
import React from 'react';
import { FeatureFlagProvider, useFlags } from './context/FeatureFlagContext';
import Dashboard from './components/Dashboard';
import SearchFeature from './components/SearchFeature';

function App() {
  return (
    <FeatureFlagProvider>
      <MainApp />
    </FeatureFlagProvider>
  );
}

function MainApp() {
  const { flags, loading } = useFlags();

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <h1>My Application</h1>
      {flags.newDashboard && <Dashboard />}
      {flags.experimentalSearch && <SearchFeature />}
    </div>
  );
}

export default App;

How This Improves Quality, Confidence, and Marketing

✅ Improved Quality & Stability

By enabling gradual rollouts and A/B testing, feature flags reduce the risk of introducing breaking changes into production. Developers can test features in controlled environments before releasing them widely.

✅ Increased Developer Confidence

With feature flags, teams can merge code into production even if a feature is incomplete, knowing that it will remain hidden until fully tested. This allows continuous deployment without fear of releasing half-baked features.

✅ Solving the Hardest Problem in Computer Science: Marketing

One of the biggest challenges in software development is not the code itself but how to market new features effectively. Feature flags allow marketing teams to:

A/B test features to see what users prefer.
Release features gradually to gather feedback before a full launch.
Target specific user segments with experimental features.

Conclusion

Using a server-side feature flag approach in React provides a robust solution for dynamically controlling features without causing UI issues. It enhances software quality, boosts developer confidence, and—most importantly—solves the hardest problem in computer science: marketing.

By adopting this method, teams can deploy features safely, optimize performance, and ensure the best user experience without unnecessary flickering or layout shifts. 🚀

Javascript Essentials 101: Higher-Order Functions, Currying, and Partial Application

João Pedro — Fri, 01 Nov 2024 15:12:17 +0000

JavaScript Essentials 101: Higher-Order Functions, Currying e Partial Application

Introdução

Nesse artigo vamos abordar conceitos fundamentais—técnicas e estruturas que sempre fizeram parte do JavaScript e são essenciais para escrever código limpo e eficiente. Mesmo que esses conceitos pareçam avançados, pense neles como parte do DNA do JavaScript.

Por que isso é importante?

Talvez você nunca tenha ouvido falar de higher-order functions, currying ou partial application, mas esses são conceitos fundamentais que tornam o código mais eficiente, reutilizável e escalável. Seja manipulando dados, otimizando chamadas de funções ou lidando com lógica complexa, essas técnicas são essenciais para entender o lado funcional do JavaScript.

Vamos explorar esses conceitos com exemplos práticos que mostram o quão úteis e poderosos eles são.

Higher-Order Functions

Uma higher-order function é qualquer função que recebe outra função como argumento ou retorna uma função como resultado. Essas funções são parte essencial do JavaScript, pois permitem aplicar técnicas de programação funcional, tornando a manipulação de dados mais limpa e intuitiva.

Exemplo: Vamos analisar map, filter e reduce, três higher-order functions que transformam arrays com uma sintaxe concisa:

const numbers = [1, 2, 3, 4, 5];

// Usando map para dobrar cada número
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// Usando filter para obter apenas os números pares
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

// Usando reduce para somar todos os números
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

Currying

Currying transforma uma função com múltiplos argumentos em uma sequência de funções, cada uma recebendo um único argumento. Essa técnica é útil para dividir operações complexas em partes menores e reutilizáveis, tornando o código mais modular.

Exemplo: Aqui está uma função de soma utilizando currying:

const add = a => b => a + b;
const addFive = add(5);

console.log(addFive(3)); // 8
console.log(addFive(10)); // 15

Com currying, criamos a função addFive a partir de add, permitindo reutilizar essa operação específica em diferentes partes do código.

Partial Application

Partial application é semelhante ao currying, mas permite preencher alguns argumentos de uma função, deixando os demais dinâmicos. Essa abordagem é útil para tarefas repetitivas com parâmetros fixos.

Exemplo: Vamos aplicar uma taxa de imposto de 20% a diferentes preços:

const applyTax = (rate, price) => price * (1 + rate);
const applyVAT = applyTax.bind(null, 0.2); // Define taxa fixa de 20%

console.log(applyVAT(100)); // 120
console.log(applyVAT(200)); // 240

Aqui, applyVAT permite calcular rapidamente os preços com uma taxa de imposto fixa, tornando o código mais enxuto e legível.

Conclusão

Essas funções podem parecer "avançadas", mas são ferramentas essenciais para dominar o JavaScript. Ao entender higher-order functions, currying e partial application, você escreverá código mais limpo, eficiente e fácil de testar e manter. No próximo capítulo, continuaremos explorando esses conceitos para desbloquear todo o potencial do JavaScript. Continue estudando—você está investindo em fundamentos que elevarão suas habilidades e confiança como desenvolvedor.

Callbacks in Javascript

João Pedro — Wed, 10 Jul 2024 18:58:30 +0000

Callbacks are a fundamental concept in JavaScript and are commonly used in asynchronous programming. In this article, we'll explore what callbacks are, why they were the main approach to async operations when async/await didn't exist in JavaScript, why they are not much used in modern projects, but it is important to understand the concept to work on legacy projects. We'll also give an example of a use case in modern JavaScript with the React Query mutation.

What are callbacks?

A callback is simply a function that is passed as an argument to another function, thats it. The function that receives the callback is responsible for calling it when the appropriate time comes.

For example, consider the following code snippet:

function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback();
}

function sayGoodbye() {
  console.log("Goodbye!");
}

greet("Alice", sayGoodbye);

In this example, the greet function takes a name argument and a callback argument. It logs a greeting to the console with the name, and then calls the callback function. The sayGoodbye function is passed as the callback argument and logs "Goodbye!" to the console.

When we run this code, it outputs:

Hello, Alice!
Goodbye!

Here, the sayGoodbye function is executed as a callback to the greet function.

Why callbacks were the main approach to async operations when async/await didn't exist in JavaScript

Before the introduction of Promises and async/await in modern JavaScript, callbacks were the main approach to handling asynchronous operations. This is because JavaScript is a single-threaded language, and blocking operations could cause the entire program to freeze, making it unresponsive.

Callbacks allowed developers to execute asynchronous operations without blocking the main thread. For example, if you needed to make an AJAX request to a server and perform some operation on the result, you could pass a callback function to the XMLHttpRequest object's onreadystatechange event, which would be executed when the response was received.

// Don't be scared, this is legacy 
// code using the XMLHttpRequest API to make an HTTP request

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json');

// Set up a callback function to be 
// called when the request is complete
xhr.onreadystatechange = function() {
    const data = JSON.parse(xhr.responseText);

    // Do something with the 
    // JSON data (e.g. log it to the console)
    console.log(data);
};

// Effectively call the HTTP request
xhr.send();

Understanding Callback Hell in JavaScript

One of the main problems with callbacks in JavaScript is that they can lead to code that is difficult to read and maintain, especially when dealing with multiple nested callbacks. This phenomenon is commonly referred to as "callback hell".

Callback hell occurs when you have several asynchronous operations that depend on each other and need to be executed in a specific order. As a result, you end up with deeply nested functions that are difficult to read and debug.

Here's a simple example of callback hell:

setTimeout(function() {
  console.log('First operation completed');

  setTimeout(function() {
    console.log('Second operation completed');

    setTimeout(function() {
      console.log('Third operation completed');
    }, 1000);
  }, 1000);
}, 1000);

In this example, we have three asynchronous operations that need to be executed in a specific order. To achieve this, we've nested three setTimeout functions inside each other. As you can see, the code quickly becomes hard to read and understand.

The solution

One way to solve callback hell is to use Promises, which provide a more structured way to handle asynchronous code. With Promises, you can chain together multiple asynchronous operations and handle errors in a more elegant way. Here's the same example using async/await:

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runOperations() {
  await wait(1000);
  console.log('First operation completed');

  await wait(1000);
  console.log('Second operation completed');

  await wait(1000);
  console.log('Third operation completed');
}

runOperations();

In this example, the wait function returns a Promise that resolves after a certain number of milliseconds. We use this function with the async/await syntax to execute the asynchronous operations in sequence. As you can see, the code is much cleaner and easier to understand compared to the nested callback approach.

Why it is not much used in modern projects, but it is important to understand the concept to work on legacy projects

In modern JavaScript, Promises and async/await have largely replaced callbacks as the preferred way of handling asynchronous operations. Promises provide a more structured way to handle asynchronous code and make it easier to avoid callback hell, a situation where callback functions are nested inside each other, making the code difficult to read and maintain.

Async/await syntax provides a more concise and readable way to write asynchronous code, and it can be easier to handle errors and control the flow of execution. However, understanding callbacks is still important because you may encounter them in some situations, especially when working on legacy codebases or integrating with third-party libraries that use callback-style APIs. Additionally, callbacks are still commonly used in non-async code such as some array methods, where they provide a simple and flexible way to customize the behavior of the method.

Here is an example:

const numbers = [1, 2, 3];

const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(evenNumbers); // [2]

Modern Usage of Callbacks

Callbacks are still a relevant concept, even in modern programming practices. They can be particularly useful when working with libraries or frameworks that use callback-based APIs.

most hiring processes are a scam

João Pedro — Fri, 05 Jul 2024 22:08:23 +0000

most hiring processes are a scam, for you

Misconception

first, you gotta go through a "resumé" filtration

if you are hired based on this garbage, you’re missing the point of what working is about. you want to work at a company that you care about, and the company wants that as well

but how they are going to know that if they're focusing on getting hundreds of resumes that mean nothing. they are vague, they have no real-world precise tie.

the second step after the filtration it's a "light interview" call, where they check if you are not a complete incompetent who is totally desaligned with the porpuse of the job.

They take advantage of your energy

if you get lucky they might decide to interview you for real and check if you have experience, maybe do some live coding, and then it doesn't extend too much.

if not, you are probably already in the middle of a kidnap. now, it's a fight to see who it's able to do the most to get the job.

maybe they'll ask you to do the one week challenge they have and compete with other 10 people that are doing the same and don't pass because you already did this 10 times and you are tired of this bs.

as funny as it seems, at this point you probably already lost some respect for the people that are hiring you.

yeah they may be impressed with your technical and soft skills that you presented to them at a such personalized manner, but now, after this, after putting all your efforts to get to the last step, they can just say: "well, we know you want X as a sallary, but we are going through this and that, can we do X - 35%?

The solution?

I believe the solution it's pretty simple: simplify.

If you are hiring, add a space for cover letters, make sure to make your offer appealing - this way even if you are willing to make your candidates lose their time and energy, you at least grab more excited people, this requires no money and barely no time. Trust your gut.

Isn't said that drive it's more valuable than technical skills? So let's add a thing that combine even better with drive, excitement and energy.

If you are wanting to be hired, be more active. Send personalized messages with your experience/skills, be seen, get proof of work, don't fear looking like a fool, have your portfolio up-to-date, build stuff.