Common React Functionality

react-functionality.js

/* reusable function to update any form input value with state */

state = {
  title: ''
}

handleChange = (e)=>{
  const {name, type, value} = e.target;
  console.log({name,type,value}); //gives keys to your console log values when you put brackets around them!
  const val = type === 'number' ? parseFloat(value) : value; //converts numbers from strings
  this.setState({[name]: val}); //allows us to use a single function for all inputs with `[name]`
}

render() {
  return (
    <input type="text" id="title" name="title" placeholder="Title" required value={this.state.title} onChange={this.handleChange} />
  )
}

/*using a timer in react that only initializes once, via functional update:*/

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1); // ✅ This doesn't depend on `count` variable outside
    }, 1000);
    return () => clearInterval(id);
  }, []); // ✅ Our effect doesn't use any variables in the component scope

  return <h1>{count}</h1>;
}


/* Read latest props at any time within react */
function Example(props) {
  // Keep latest props in a ref.
  const latestProps = useRef(props);
  useEffect(() => {
    latestProps.current = props;
  });

  useEffect(() => {
    function tick() {
      // Read latest props at any time
      console.log(latestProps.current);
    }

    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []); // This effect never re-runs
}

/* only run an expensive function update in react when certain props change by wrapping that function in useMemo: */
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

/*only render expensive child components if a certain prop changes: */
function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}


/*prevent a useState function from running on ever render: */

//this runs every render:
function Table(props) {
  // ⚠️ createRows() is called on every render
  const [rows, setRows] = useState(createRows(props.count));
  // ...
}
//this doesn't:
function Table(props) {
  // ✅ createRows() is only called once
  const [rows, setRows] = useState(() => createRows(props.count));
  // ...
}

/*same deal if you want to avoid recreating a useRef initial value:*/
//this runs every render
function Image(props) {
  // ⚠️ IntersectionObserver is created on every render
  const ref = useRef(new IntersectionObserver(onIntersect));
  // ...
}
//this doesn't:
function Image(props) {
  const ref = useRef(null);

  // ✅ IntersectionObserver is created lazily once
  function getObserver() {
    if (ref.current === null) {
      ref.current = new IntersectionObserver(onIntersect);
    }
    return ref.current;
  }

  // When you need it, call getObserver()
  // ...
}

/* dispatch a state update to a parent from a deep child without passing down props: */

const TodosDispatch = React.createContext(null);

function TodosApp() {
  // Note: `dispatch` won't change between re-renders
  const [todos, dispatch] = useReducer(todosReducer);

  return (
    <TodosDispatch.Provider value={dispatch}>
      <DeepTree todos={todos} />
    </TodosDispatch.Provider>
  );
}
//Any child in the tree inside TodosApp can use the dispatch function to pass actions up to TodosApp:
function DeepChild(props) {
  // If we want to perform an action, we can get dispatch from context.
  const dispatch = useContext(TodosDispatch);

  function handleClick() {
    dispatch({ type: 'add', text: 'hello' });
  }

  return (
    <button onClick={handleClick}>Add todo</button>
  );
}


/* you can destructure a function param into its component parts, for example if your param is a payload consisting of loading and error states:*/
myDestructuredParams({loading,error}){
 //... 
}
const args = {
  loading: function(){
    //...
  },
  error: function(){
    //...
  }
}
myDestructuredParams(args);


/* async functions */

uploadFile = async(e) => {
  const res = await fetch('https://api.cloudinary.com/v1_1/[user_name]/image/upload', {
    method: 'POST',
    body: data
  }); 
}

/* Disable ES Lint Line */
// eslint-disable-line react-hooks/exhaustive-deps


/* GET PREV PROPS OR STATE */
function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);  return <h1>Now: {count}, before: {prevCount}</h1>;
}

function usePrevious(value) {  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}