Functional React And Hooks

Functional Programming

• Functional Programming is an approach of writing software based on the algebraic concept of functions.
• Functional programming emphasizes the immutability of data, the use of pure functions, and avoidance of side effects.
• immutable data: data that once declared is not changed or mutated.
• pure function: a function that takes in a parameter and returns a unique value based on the parameter.
• side effect: Any operation that affects the outside environment where the operation takes place.

React Provides Two Ways To Create Components

Class Based Components

import React from "react"
class App extends React.Component {
	constructor(props){
		super(props)
		this.state={foo:"bar"}
	}
	
	componentDidMount() {
		//preform actions related to when the component loads
	}
	
	componentDidUpdate() {
		// preform actions when values used by the component updates
	}

	render(){
		return(
			<h1>{this.props.welcomeMessage}<h1>
		)
	}	
}

Function Based Components

	import React from "react"
	function App(props) {
		return(
			<h1>{props.welcomeMessage}</h1>
		)
	} 

• Class based components are verbose and use this in a non standard approach.
• Functional Components are cleaner and easier to understand.
• Functional Components lacked persistent data and control over when components updated

React Hooks

• With the release of React 16.8, React introduced the concept of hooks the most important being useState and useEffect.
• useState and useEffect super charge functional components

import React, {useState, useEffect} from "react"
	
function App(props) {
const [foo, setFoo] = useState("bar")

useEffect(() => {
	//preform actions related to when the component loads
}, [//watch for changes to values used by useEffecr])
	return(
		<h1>{props.welcomeMessage}</h1>
	)
} 

useState

• The useState hook enables functional components to have state variables.
  • A state variable in react is any variable whose value will persist after a component has rerendered.
• const [foo, setFoo] = useState("bar");
  • foo is the accessor for the variable it returns a readonly value.
  • setFoo is the mutator for the variable and allows for new values to be set for a state variable .
  • useState() makes react aware of the specfied state variable and returns the accessor and mutator for it
  • useState("bar") allows for a default value to be set for a state variable.

useEffect

• the useEffect hook enables functional components to rerender when an internal change happens in a component.
• useEffect handles side effects that occur outside the component function, hence the name, and dictates how the component should respond.
• useEffect(() => {setExternalData(axios.get("supercool.api"))},[externalData]);
• useEffects syntax can be confusing and is unique to react
• the best way to think about useEffect is useEffect(effects, inputs)
• effects is an anonymous function that contains function calls that have side effects. * Side-effects include API calls, accessing local storage or interacting with the dom * failure to call functions with side-effects outside of useEffect causes a component to render continuously
• inputs is an array of values used by the effects inside of a component.
  • useEffect watches the values inside of inputs and if they change rerender the component.

useEffect !== componentDidMount || componentDidUpdate

Other Important Hooks

• useContext
• useCallback

Rules of Hooks

1. Only call hooks from functional react components or custom
2. Dont call hooks in nested functions, loops or conditionals

Custom React Hooks

• React hooks are based on mixins
  • A mixin is a function or class that can affect the state and behavior of a parent function or class.
• Hooks provide React with a clean API to compose components.