Bridging the Gap: Comparing React/TypeScript with Haskell and Functional Programming Principles

Functional programming (FP) has steadily influenced the software engineering world, especially with frameworks like React. React, paired with TypeScript (TS), brings many FP principles to the forefront of front-end development. Yet, FP’s origins and philosophies, embodied in languages like Haskell, often remain a mystery to most engineers.

This article bridges the gap between React/TS syntax and Haskell, showing how React engineers are already embracing FP concepts — perhaps without realizing it — and how Haskell can deepen their understanding.

React/TS and Functional Programming: A Primer

React’s shift to functional components and hooks aligns it closely with FP principles:

• Immutability: React’s state management avoids direct mutation, favoring functions like setState.
• Pure Functions: Components are encouraged to be “pure,” producing the same output for the same input.
• Composition: React components are composable, much like FP functions.

TypeScript adds static typing to this mix, enhancing safety and predictability — concepts cherished in Haskell.

Key FP Principles in React and Haskell

1. Pure Functions

• React/TS: Functional components in React mimic pure functions:

const Greeting = ({ name }: { name: string }) => <h1>Hello, {name}</h1>;

This component:

• Takes an input (name).
• Produces the same output for the same input.
• Contains no side effects.

Haskell: Haskell enforces pure functions at the language level:

greeting :: String -> String
greeting name = "Hello, " ++ name

• Haskell’s type system (String -> String) guarantees this function takes a String and returns a String, with no hidden state or side effects.

2. Immutability

• React/TS: React encourages immutability by updating state using new objects:

const [items, setItems] = useState<string[]>([]); 
const addItem = (item: string) => setItems([...items, item]);

Here, setItems creates a new array rather than modifying the old one.

• Haskell: In Haskell, immutability is a default. Data structures are inherently immutable:

addItem :: [String] -> String -> [String] 
addItem items item = items ++ [item]

The ++ operator returns a new list, leaving the original unchanged.

3. Type Systems

• React/TS: TypeScript enforces types at compile time:

const add = (a: number, b: number): number => a + b;

If you pass a non-number to add, TypeScript catches it before runtime.

• Haskell: Haskell’s type system is even more powerful, enabling developers to encode complex logic:

add :: Int -> Int -> Int
add a b = a + b

Haskell’s type inference reduces boilerplate while ensuring strict type safety.

4. Higher-Order Functions

• React/TS: Functions that take or return other functions are higher-order functions. React uses them extensively:

const withLogger = (Component: React.FC) => {
   return (props: any) => {
     console.log("Rendering", Component.name);
     return <Component {...props} />;
   };
 };

• Haskell: Haskell natively supports higher-order functions:

withLogger :: (a -> b) -> a -> b 
withLogger f x = trace "Calling function" (f x)

5. Side Effects and useEffect

• React/TS: React isolates side effects using useEffect:

useEffect(() => {   
   console.log("Component mounted");
   return () => console.log("Component unmounted");
 }, []);

• Haskell: Haskell isolates side effects in its IO Monad, separating them from pure logic:

main :: IO () main = do   
putStrLn "Component mounted"   
putStrLn "Component unmounted"

Haskell’s type system makes side effects explicit, unlike JavaScript.

6. Composition

• React/TS: React encourages composing small components to build complex UIs:

 const Header = () => <header>Header</header>;
 const Footer = () => <footer>Footer</footer>;
 const Page = () => (
   <div>     
     <Header />
     <main>Main content</main>
     <Footer />
   </div>
 );

• Haskell: Haskell functions compose seamlessly:

header :: String 
header = "Header"  

footer :: String 
footer = "Footer" 
 
page :: String 
page = header ++ "\nMain content\n" ++ footer

What Can React Developers Learn from Haskell?

1. Stronger Type Systems: Haskell’s type system inspires safer patterns in TypeScript. Tools like fp-ts bring Haskell-like functional programming constructs to TypeScript, enabling better composition and safety.
2. Separation of Pure and Impure Logic: Haskell’s separation of pure and side-effectful logic can guide React developers to structure useEffect and state management more effectively.
3. Declarative Composition: Haskell teaches a mindset for composing logic declaratively, which translates naturally to React component design.
4. Embracing Immutability: Haskell’s immutability-first approach reinforces the benefits of immutability in React, such as easier debugging and predictable updates.

Conclusion

React and TypeScript already incorporate many functional programming principles, but exploring Haskell can deepen your understanding of these ideas. Haskell’s purity, immutability, and type system set a gold standard for functional programming, offering insights that can refine your React development practices.

By learning Haskell — or even experimenting with its concepts — you can write React code that’s cleaner, safer, and more maintainable, unlocking the full potential of functional programming in front-end development.