// Props
parameters
{{}}
{} javascript domain
{{}} object in javascript domain
// HOOKS
start with useXxxx
UseState
const [text, setText] = useState("random title");
Component name must be uppercase
must be in the function/component body, cannot be outside. Needs to be invoked in the function
cannot call conditionally
if(){
const [text, setText] = useState("random title");
}
Custom Hooks start with useFetch
function needs to be a component or needs to be acustom hook
// ... Spread operator
copy the values and add new values, leaves the rest of the values and changes only one
setPerson({ ...person, message: 'hello world' });
//UseEffect
Basics, conditional, dependency list, cleanup function, fetch data
Work outside of the component
Can be used as many as you want
useEffect(() => {
console.log("call useEffect");
if (value > 0) {
document.title = `New Messages(${value})`;
}
});
only run in initial rendering 5:04 tutorial video
useEffect(() => {XX}, []); //Only renders once
useEffect(() => {XX}, [value]); //renders when the value updates
//Cleanup function
useEffect(() => {
console.log("useEffect");
window.addEventListener("resize", checkSize);
return () => {
console.log("cleanup");
window.removeEventListener("resize", checkSize);
};
}, []); // [] dependencies, to render at the beginning
console.log("render");
//FETCH DATA
// USE CONTEXT <
Context API / useContext
To pass properties of object to multiple levels of nested components
// CUSTOM HOOKS USE FETCH <
// <
// PROP TYPES<
import PropTypes from 'prop-types'
Product.propTypes ={
image:PropTypes.object.isRequired,
name:PropTypes.string.isRequired,
price:PropTypes.string.isRequired
}
// REACT ROUTER <
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Link, useParams } from 'react-router-dom';
// OPTIMIZATION
when useMemo and useCallback Kent C Odds page
React.memo (To avoid re-render for example components (for example list of components))
