Lifecycle methods written with hooks can be tested here
This replaces the tranditional lifecycle method componentDidMount
useEffect(() => {
// Code in here will run only after the first render (mount)
}, [])
This replaces the deprecated tranditional lifecycle method componentWillUpdate
const isAlreadyMounted = useRef(false)
useEffect(() => {
isAlreadyMounted.current = true
}, [])
if (isAlreadyMounted.current) {
// Code in here will run every time other than the mount
}
This replaces the tranditional lifecycle method componentDidUpdate
const isAlreadyMounted = useRef(false)
useEffect(() => {
if (isAlreadyMounted.current) {
// Code in here will run every time other than the mount
}
})
useEffect(() => {
isAlreadyMounted.current = true
}, [])
Combines the traditional lifecycle methods componentDidMount
and componentDidUpdate
useEffect(() => {
// Code in here will run with every render of the view
})
useEffect(() => {
// Code in here will run when a state variable (`stateVar`) is set
}, [stateVar])
This replaces the depricated traditional lifecycle method componentWillMount
const useConstructor = (callback) => {
const hasBeenCalled = useRef(false)
if (hasBeenCalled.current) return
callback()
hasBeenCalled.current = true
}
useConstructor(() => {
// Code in here will run before the render, and only on the mount (first call)
})
This replaces the traditional lifecycle method componentWillUnmount
useEffect(() => {
return(() => {
// Code in here will run when the component is removed from the UI
})
}, [])
To create context:
- Create a folder named
contexts
in thesrc
folder- If applicable, add the path to
src/contexts
to your config alias (remember to restart the dev server)
- If applicable, add the path to
- Create a file within
src/contexts
to represent the Context - In the new file:
import {createContext} from 'react'
- Return
createContext()
to a variable- The argument passed to
createContext()
is the start value for the Context variable - Best practice is to name the variable with a capital letter, and end with
Context
, for example:UserContext
- The argument passed to
- Export the Context object, for example:
export default UserContext
import {createContext} from 'react'
const UserContext = createContext(null)
export default UserContext
- In the Component that will provide the context, import the Context object, for example:
import UserContext from 'contexts/user'
- Wrap the Component(s) that will use the Context data with a provider component, for example:
<UserContext.Provider>...</UserContext.Provider>
- If applicable, set the
value
attribute (property) to the Provider, with the desired data, for example:<UserContext.Provider value={userData}>...</UserContext.Provider>
import React from 'react'
import UserContext from 'contexts/user'
import User from 'pages/UserPage'
const App = () => {
return (
<UserContext.Provider value={{name:`World`}}>
<UserPage />
</UserContext.Provider>
)
}
export default App
- In any of the Provider's descendant components,
import
the Context object, for example:import UserContext from 'contexts/user'
- Import the
useContext
hook from the React library:import {useContext} from 'react'
- Within the Component, query the context using
useContext
, which will return thevalue
data stored in the Provider, for example:const userData = useContext(UserContext)
import React, {useContext} from 'react'
import UserContext from 'contexts/user'
const UserPage = () => {
const userData = useContext(UserContext)
return (
<h1>Hello, {userData.name}</h1>
)
}
export default UserPage