React JS & Functional Programming Principles

ReactJS &
Functional
Programming
principles
Andrii Lundiak @ GlobalLogic
Facebook: Andrii Lundiak
Twitter: @landike
GitHub: @alundiak
Touch: A bit of theory and
code examples
in JavaScript and ReactJS

Agenda
● Immutability & ReactJS
● JS Function vs. ReactJS Functional Component & ReactJS Hooks
● First-Class & High-Order terms
● Memoizing
TODO:
● Lambda Calculus
● Avoid shared state
● Avoid side effects
● Strict/non-strict evaluation

Functional Programming
Functional programming is the process of building software by composing pure functions,
avoiding shared state, mutable data, and side-effects.
“In computer science, functional programming is a programming paradigm that treats computation as
the evaluation of mathematical functions and avoids state and mutable data. It emphasizes the
application of functions, in contrast to the imperative programming style, which emphasizes changes in
state. Functional programming has its roots in the lambda calculus, a formal system developed in the
1930s to investigate function deﬁnition, function application, and recursion.” Wiki.

Stateless vs. Stateful
https://medium.com/@DarkMordor/common-code-mistakes-in-react-that-you-maybe-made-18acce2787bf
“(react/prefer-stateless-function)
It’s more improvement in code and app than an error, but I recommend you to follow this rule. If
your component doesn’t use state than make it the stateless component”

https://medium.com/@DarkMordor/common-code-mistakes-in-react-that-you-maybe-made-1
8acce2787bf
“(react/no-direct-mutation-state)
State mutation is a huge error. Uncontrollable state mutation will lead to untraceable bugs and
big problems. ”
// When it is “broken” immutability?
Immutability & ReactJS this.props

Function & ReactJS functional component
// JavaScript
function add(a, b) { return a + b; }
// ReactJS
export function FunctionalAddComponent(props) { // aka stateless function
const { a, b } = props;
return ( <div>{a + b}</div> );
}
// When it is “broken” functional component?

Pure function vs. Pure component
● “If your React component’s render() function renders the same result given the same props and
state, you can use React.PureComponent for a performance boost in some cases.”
● “Hooks let you use more of React’s features without classes.Conceptually, React components
have always been closer to functions. Hooks embrace functions, but without sacriﬁcing the
practical spirit of React. ”. Details.

First-Class & High-Order terms
1. In Math: High-Order function
2. In Programming: First-class function , MDN details.
● “First-class functions - functions which can be as arguments to other functions, returning them as the
values from other functions, and assigning them to variables or storing them in data structures”
● “First-class functions are a necessity for the functional programming style, in which the use of higher-order
functions is a standard practice.”
● JS: ﬁrst-class/higher-order functions : ﬁlter(), map() and reduce(). Details.
● “We can also look at closures as first-class functions with bound variables. ”. Details.
● “setTimeout is of arity 2, or equivalently say that is a binary function”. Details.

High Order ReactJS Component
JavaScript:
// A Higher-Order Function is a FUNCTION that takes another FUNCTION as an input, returns
a FUNCTION or does both.
ReactJS:
// A Higher-Order Component is a FUNCTION that takes a COMPONENT and returns a new
COMPONENT.
“HOC doesn’t modify the input component, nor does it use inheritance to copy its behavior. Rather, a HOC composes the original
component by wrapping it in a container component. A HOC is a pure function with zero side-effects.”. Details. Users/Stocks
ReactJS example.
// When it is “broken” HOC component?

hof() and hoc()
// JavaScript
function hof() {
const firstName = 'Andrii';
return function (lastName) {
return `${firstName} ${lastName}`;
};
}
// ReactJS
const createHOC = (WrappedComponent, data) => {
class HocClass extends React.Component {
render() {
return <div> <WrappedComponent {...data} /> </div>;
}
}
return HocClass;
};

Currying, Derivative, Calculus
● Currying. “In mathematics and computer science, currying is the technique of translating the
evaluation of a function that takes multiple arguments into evaluating a sequence of functions,
each with a single argument. ”
● Derivative. “In other words, every value of x chooses a function, denoted fx
, which is a function of
one real number”. x => f(x) . Also related to Calculus.
● Function Composition - f( g( h(x) ) )
● TODO: Lambda Calculus

Currying in JavaScript
// JavaScript
const notCurry = (x, y, z) => x + y + z; // a regular function
const curry = x => y => z => x + y + z; // a curry function
// ReactJS
const reverse = PassedComponent => ({ children, ...props }) => (
<PassedComponent {...props}>
{children.split("").reverse().join("")}
</PassedComponent>
);
// Redux
export const withMiddleware = store => next => action => {
// do something, next(action) or state.dispatch();
}

Memoization
● “Memoization - storing the results of expensive function calls and returning the cached result
when the same inputs occur again.”
● “React memo() - s a higher order component. It’s similar to React.PureComponent but for
function components instead of classes. If your function component renders the same result
given the same props, you can wrap it in a call to React.memo for a performance boost in some
cases by memoizing the result. This means that React will skip rendering the component, and
reuse the last rendered result".
●
Good expl
https://logrocket.com/blog/pure-functional-components/

// Approach 1
export const MyMemoComponentWithFuncComp = React.memo(FunctionalComponent );
// Approach 2.1
export const MyMemoComponentWithRegularFunc = React.memo(function FunctionalComponent (props) {
const { msg } = props;
return <div> FunctionalComponent says: {msg}. </div>;
});
// Approach 2.2
export const MyMemoComponentWithFatArrow = React.memo((props) => {
const { msg } = props;
return <div> FunctionalComponent says: {msg}.</div>;
});
React.memo() is Functional HOC

ReactJS tech/code outcomes
● ReactJS combines many things, is very ﬂexible and allows you to choose, what suits you
best.
● Don’t mutate this.props from components inside
● Don’t mutate this.state this.state directly.
● It matters for debugging how you name your function, component, wrapping and wrapped
components.

Github repos
● https://github.com/stoeffel/awesome-fp-js
● https://github.com/markerikson/react-redux-links/blob/master/functional-programming.md
● https://github.com/alundiak/fp-examples

Read: FP in JavaScript
● https://en.wikipedia.org/wiki/Functional_programming#JavaScript
● https://dev.to/leandrotk_/functional-programming-principles-in-javascript-26g7
● https://medium.com/dailyjs/tagged/functional-programming
● https://medium.com/javascript-scene/tagged/functional-programming
● https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a
0
● https://medium.com/@cscalfani/so-you-want-to-be-a-functional-programmer-part-1-1f15e387e536
● https://medium.freecodecamp.org/discover-the-power-of-first-class-functions-fd0d7b599b69
● https://medium.freecodecamp.org/an-introduction-to-functional-programming-style-in-javascript-71fcc050f064
● https://hackernoon.com/javascript-and-functional-programming-pt-2-first-class-functions-4437a1aec217
● https://medium.com/front-end-weekly/javascript-es6-curry-functions-with-practical-examples-6ba2ced003b1

Read: FP in ReactJS
● https://lispcast.com/is-react-functional-programming/
● https://medium.com/@agm1984/an-overview-of-functional-programming-in-javascript-and-react-part-on
e-10d75b509e9e
● https://levelup.gitconnected.com/functional-react-is-it-possible-ceaf5ed91bfd
● https://www.dropsource.com/blog/functional-programming-principles-in-react-and-flux/
● https://codinglawyer.net/index.php/2018/01/31/taste-the-principles-of-functional-programming-in-react/
● https://medium.com/@andrea.chiarelli/the-functional-side-of-react-229bdb26d9a6
● https://hackernoon.com/curry-away-in-react-7c4ed110c65a
Video (PL):
https://www.youtube.com/watch?v=8rUKMWiT5Y4

Q&A
Facebook: Andrii Lundiak
Twitter: @landike
GitHub: @alundiak

React JS & Functional Programming Principles

Recommended

More Related Content

What's hot (20)

Similar to React JS & Functional Programming Principles (20)

More from Andrii Lundiak (8)

Recently uploaded (20)

React JS & Functional Programming Principles