Please enable JavaScript.

Coggle requires JavaScript to display documents.

Components - Coggle Diagram

- - - - useState() gives us a ability to encapsulate local state in a FC
      - useEffect()
        enables to perform side effects in function components
        examples of side effects:
        
        Data fetching,
        
        Setting up a subscription
        
        manually changing the DOM
        
        require cleanup
        
        don't require cleanup
        
        if second argument:
        
        is omitted the effect will run after every render of the component.
        
        is [ ] the effect will only run once, after the initial render of the component.
      - Rules of Hooks:
        
        Only Call Hooks at the Top Level. Don’t call Hooks inside loops, conditions, or nested functions.
        
        Only Call Hooks from React Functions. Don’t call Hooks from regular JavaScript functions.
        
        reason: React relies on the order in which Hooks are called. If we want to run an effect conditionally, we can put that condition inside our Hook
  - - - Mounting is the phase in the React component lifecycle where a component is inserted into the DOM for the first time.
        In more concise terms, mounting refers to the process of creating a new component instance, initializing its properties and state, and inserting it into the DOM tree. This is typically done when a component is first rendered onto the page.
        During the mounting phase, React calls a series of lifecycle methods such as constructor(), getDerivedStateFromProps(), render(), componentDidMount(), etc.
        
        constructor(props): This method is called first and is used to initialize the component's state and bind methods.
        
        static getDerivedStateFromProps(props, state): This method is called next and is used to update the component's state based on changes to its props.
        
        render(): This method is called next and is used to generate the HTML markup for the component.
        
        componentDidMount(): This method is called last and is used to perform any side-effects such as fetching data from a server.
      - Updating is the phase when a component's props or state are updated.
        
        static getDerivedStateFromProps(props, state): This method is called again if the component's props have changed and is used to update the component's state.
        
        shouldComponentUpdate(nextProps, nextState): This method is called next and is used to determine if the component should re-render.
        
        render(): This method is called next and is used to generate the updated HTML markup for the component.
        
        getSnapshotBeforeUpdate(prevProps, prevState): This method is called next and is used to capture information about the component's state or DOM before it is updated.
        
        componentDidUpdate(prevProps, prevState, snapshot): This method is called last and is used to perform any side-effects after the component has been updated.
      - Unmounting is the phase when a component is removed from the DOM.
        
        componentWillUnmount(): This method is called before the component is removed from the DOM and is used to clean up any side-effects such as event listeners or timers.
    - - props are updated
      - setState() is called