1. The document discusses principles of functional programming like pure functions, function composition, and currying that can be applied in React using hooks. 2. It explains how hooks allow separating side effects from pure functions, and how to manage state functionally using useReducer. 3. Custom hooks can be composed to build reusable logic, like a useLog hook that logs the return value of another custom hook useCountTimeout that increments a counter over time.

1. Practical Functional
Programming in React
Netta Bondy, Dafna Rosenblum
June 2019

2. About us
@_bondit_
medium.com/@NettaB
@dafnaros
medium.com/@dafir

3. About This Talk
● Referntial Transparency
● Denotational Semantics
● Compositional Functions
● Determinacy

4. Principles of Functional Programming
Pure Functions
Function Composition

5. Pure Functions
1. Explicit Inputs
2. Explicit Outputs
3. No Side Effects

6. Principles of Functional Programming
Pure Functions
Function Composition

7. Compositionality
The meaning of complex
expressions should be
determined by the
combination of two things:
1. The meaning of their
parts
1.
2. The rules used to
combine them

8. Basic Function Composition
funcB(funcA(arg))

9. Currying
curriedFunc = argA => argB => {
/* do something with both args */
}
curriedWithA = curriedFunc(1)
/* (argB) => {closure over argA = 1} */

10. Currying
filterActionArrayForType = type =>
actionArray =>
actionArray.filter(action =>
action.type !== type);
killActionFilter =
filterActionArrayForType(‘kill’)

11. Piping
pipe(
funcA,
funcB,
funcC,
...
)
funcC(
funcB(
funcA(arg)
)
)...

12. Piping
pipe = (...funcs) => arg =>
funcs.reduce((value, func) =>
func(value), arg);
rxjssrcinternalutilpipe.ts

13. Piping
pipe(
firstFunc,
secondFunc,
thirdFunc,
...
)

14. Piping
formatFamily = pipe(
parseData,
attachActions
);
formatFamily(starksFromServer)

15. 1. Basic Composition
2. Currying
3. Piping

17. Hooks - The Functional Parts

18. Classes => Functions

19. Hooks Syntax: useState
function Counter() {
const [counter, setCounter] = useState(0);
const handleClick = () => setCounter(counter + 1);
return (
<>
<span>{counter}</span>
<button onClick={handleClick}>+</button>
</>
)}

20. useState: Using The Previous State
const handleClick = () => {
setCounter(counter + 1);
};
1
2
3
const handleClick = () => {
setCounter(prevCounter => prevCounter + 1);
};
const handleClick = (setter) => {
setter(prevCounter => prevCounter + 1);
};

21. Lifecycle => Side Effects

22. useEffect Doesn’t Block Rendering

23. useEffect Dependency Array
const [counter, setCounter] = useState(0);
const [manualCounter, setManCount] = useState(100);
useEffect(() => {
setTimeout(() => {
setCounter(counter + 5);
}, 5000);
}, [counter]);

24. When Dependency Array is Redundant
const timeoutSetter = () => {
setTimeout(() => {
setCounter(counter + 5);
}, 5000);
};
useEffect(() => {
timeoutSetter();
}, [timeoutSetter]);

25. useEffect Dependency Array
const doSomeLogic = (x) =>
x > 5 ? 4 : 3;
useEffect(() => {
doSomeLogic(x);
setCounter(counter + 5);
}, [counter]);

26. Calling external function from an effect
1. useCallback
2. Pure function
3. useReducer

27. useReducer
function reducer(state, action) {
switch (action.type) {
case "update_time":
return {
...state,
clock: action.data.clock
};
default:
throw new Error();
}}

28. const [state, dispatch] =
useReducer(reducer, initialState);
dispatch({
type: "update_time",
data: { clock: time }
})
useReducer

29. Let’s Compose
https://www.reddit.com/r/gameofthrones/comments/bcg49l/no_spoilers_this_man_doesnt_get_the_recognition/

30. Currying With Hooks
const updateCount = (setter, current, increment) => () => {
setTimeout(() => {
setter(current + increment);
}, 2000);
};
useEffect(updateCount(setCount, count, 5));

31. Custom Hooks Syntax
function useCountTimout() {
const [counter, setCounter] = useState(0);
useEffect(() => {
setTimeout(() => {
setCounter(counter + 5);
}, 5000);
});
return counter;
}

32. Composing Custom Hooks
useEffect(() => {
console.log(`using effect! ${hookReturnVal}`);
});
1. Add to our custom hook
2. Create a new custom hook
3. Compose

33. Composing Custom Hooks
function useCountTimout() {
const [ctr, setCtr] = useState(0);
useEffect(() => {
setTimeout(() => {
setCtr(ctr + 5);
}, 5000);
});
return ctr;
}
function useLog(customHook) {
const res = customHook();
useEffect(() => {
console.log(`hop! ${res}`);
});
return res;
}
const buttonCount = useLog(useCountTimout);

34. What’s Functional About Hooks - Recap
- Separating side effects from pure functions - allowing functional thinking
- Composing custom hooks
- Managing state in pure reducer functions with useReducer
● Don’t use hooks without the ESlint plugin
● Read the docs

35. React allows us to enjoy
the benefits of functional patterns

36. Thanks!
@_bondit_
@dafnaros