# react_best_practices
Learning about React Best Practices

Following the tutorial

https://youtube.com/watch?v=5r25Y9Vg2P4

No working code was introduced. Only snippets.

AGENDA:
1. Keeping project wide constants in a separate file.
2. Consistency in project structure.
   - To be further researched: State management: Context API, Zustand, Redux
3. Well structured project, by using Components for reusable and/or distinct UI elements.
4. Avoid unnecessary <div></div> by using <></>.
5. Don't add layout styles to reusable components. Options to use:
   - wrapping with <div></div>
   - className prop which gets merged with the reusable one
6. Use TypeScript to catch low hanging fruit bugs.
7. Keep components:
   - simple (often dumb)
   - rather general than specific in use
   - agnostic to specific use case
   - reusable to other use cases
   - dont pass state if not necessarily nedded
8. Dont pass down SetState, insted use a separate event handler function
   - dont pass setState function through intermediaries ("prop drilling") _instead_ use State management solution OR use Children Pattern (additional benefit: rerender of parent does not cause rerender of children).
   - setState((prev) => [...prev, {...}] allows no additional logic; better to use an updater function handleAddItem(item: Item || itemMembers) which is passed down
9. Use convention: onAddTodo={handleAddTodo} and/or onClick={handleClickEvent} (keeping components lean/reusable)
10. Try not to repeat:
   - the same calculations, if not necessary, on rerendering of a component.
      const result = useMemo(() => { return calculation }, [params])
   - recreation of functions
      const myFunc = useCallback(() => (input) => { ... }, [input params])
   - recreation of objects
      useMemo({Object Or Array});
      Dont use for state!   
   - rerendering of components
      const ItemComponent = memo(function ({onAddItem}: ItemFormProps) {...}
      This way components which use myFunc as prop, also do not get rerendered, if the props dont change
11.   setState((prev) => prev+1) and also
      setState((prev) => prev+1)
      setState((prev) => prev+1)
12.   instead of using 
         useState(false)
      use 
         Status = 'idle' | 'loading' | 'error' | 'success'
         useState<Status>('idle')
13.   Single source of truth: Keep track of an 'active' or 'selected' item by its id, dont duplicate the whole object
14.   "use the URL for some state (filters, pagination, etc.), not useState" URL as single source of truth. URL can be bookmarked or shared with someone else and result in the exact same view.
15.   "Keep useEffect simple: one concern per useEffect"
         const [todos, setTodos] = useState([]);
         useEffect(() => {
            localStorage.setItem("todos", JSON.stringify(todos));
         }, [todos]);
         useEffect(() => {
            document.addEventListener("keydown", handleEscapeKey);
         }, []);
16.   Consider alternatives to fetching data in useEffect. Usually it results in refetching the same data, if we move back and forth in the UI list, because there is no caching.
         - To be further researched: useQuery hook from React Query or SWR or Next.js
17.    Messy, Big components are a Code Smell