React JS & Functional Programming Principles

React JS & Functional Programming Principles

• 1.
  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
• 2.
  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
• 3.
  Functional Programming Functional programmingis 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 definition, function application, and recursion.” Wiki.
• 4.
  Stateless vs. Stateful https://medium.com/@DarkMordor/common-code-mistakes-in-react-that-you-maybe-made-18acce2787bf “(react/prefer-stateless-function) It’smore 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”
• 5.
  https://medium.com/@DarkMordor/common-code-mistakes-in-react-that-you-maybe-made-1 8acce2787bf “(react/no-direct-mutation-state) State mutation isa huge error. Uncontrollable state mutation will lead to untraceable bugs and big problems. ” // When it is “broken” immutability? Immutability & ReactJS this.props
• 6.
  Function & ReactJSfunctional 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?
• 7.
  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 sacrificing the practical spirit of React. ”. Details.
• 8.
  First-Class & High-Orderterms 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: first-class/higher-order functions : filter(), 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.
• 9.
  High Order ReactJSComponent 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?
• 10.
  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; };
• 11.
  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
• 12.
  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(); }
• 13.
  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/
• 14.
  // Approach 1 exportconst 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
• 15.
  Demo time
• 16.
  ReactJS tech/code outcomes ●ReactJS combines many things, is very flexible 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.
• 17.
  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
• 18.
  Read: FP inJavaScript ● 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
• 19.
  Read: FP inReactJS ● 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
• 20.
  Q&A Facebook: Andrii Lundiak Twitter:@landike GitHub: @alundiak