Main concept of react || React

In React.js, there are several methods available for managing components, handling lifecycle events, and working with hooks. Below, I've categorized the most important methods into different sections:

1. Component Lifecycle Methods (Class Components)

In React class components, there are several lifecycle methods that you can override to run code at specific times in a component's life cycle:

Mounting Phase (initializing a component)

• 
  

  constructor()

  
  
  
  
  
  • Called before the component is mounted.
  
  
  • Useful for initializing state or binding event handlers.
  
  
  
  
  
  



• 
  
  

  static getDerivedStateFromProps(props, state)

  
  
  
  
  
  • Called before rendering, both on the initial mount and on subsequent updates.
  
  
  • Allows the state to be updated based on props.
  
  
  
  
  
  



• 
  
  

  render()

  
  
  
  
  
  • The only required method in a class component.
  
  
  • Should return React elements, which will be rendered to the DOM.
  
  
  
  
  
  



• 
  
  

  componentDidMount()

  
  
  
  
  
  • Called immediately after a component is mounted.
  
  
  • Commonly used for fetching data, setting up subscriptions, or making API calls.
  
  
  
  
  
  

Updating Phase (re-rendering due to changes in props or state)

• 
  

  static getDerivedStateFromProps(props, state)

  
  
  
  
  
  • (Also called during updates) Used to update state based on props.
  
  
  
  
  
  



• 
  
  

  shouldComponentUpdate(nextProps, nextState)

  
  
  
  
  
  • Determines if a re-render is necessary.
  
  
  • Can be used to optimize performance by preventing unnecessary renders.
  
  
  
  
  
  



• 
  
  

  render()

  
  
  
  
  
  • (Called again during updates)
  
  
  
  
  
  



• 
  
  

  getSnapshotBeforeUpdate(prevProps, prevState)

  
  
  
  
  
  • Called right before changes from the virtual DOM are applied to the actual DOM.
  
  
  • Useful for capturing information (like scroll position) before updates.
  
  
  
  
  
  



• 
  
  

  componentDidUpdate(prevProps, prevState, snapshot)

  
  
  
  
  
  • Called immediately after updating occurs.
  
  
  • Useful for performing operations after the component has been updated (e.g., making API calls based on prop changes).
  
  
  
  
  
  

Unmounting Phase (cleaning up before a component is removed)

• 
  componentWillUnmount()
  
  
  
  
  • Called just before a component is unmounted and destroyed.
  
  
  • Useful for cleaning up subscriptions, timers, or event listeners.
  
  
  
  
  
  

Error Handling

• 
  componentDidCatch(error, info)
  
  
  
  
  • Called if there is an error during rendering, in a lifecycle method, or in the constructor of any child component.
  
  
  • Useful for logging errors and displaying fallback UI.
  
  
  
  
  
  

2. React Hooks (Function Components)

Hooks are a new addition in React 16.8 that let you use state and other React features without writing a class.

Basic Hooks

• 
  useState(initialState)
  
  
  
  
  • Allows you to add state to a functional component.
  
  
  • Returns a state variable and a function to update it.
    
  
  
  
  
  
  

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

• 
  useEffect(callback, dependencies)
  
  
  
  
  • Similar to componentDidMount, componentDidUpdate, and componentWillUnmount combined.
  
  
  • Used for side effects like data fetching, subscriptions, or manually changing the DOM.
    
  
  
  
  
  
  

  useEffect(() => {

    // Effect logic here

    return () => {

      // Cleanup logic here (like componentWillUnmount)

    };

  }, [dependencies]);

• 
  useContext(Context)
  
  
  
  
  • Allows you to subscribe to React context without nesting Consumer components.
    
  
  
  
  
  
  

  const value = useContext(MyContext);

Additional Hooks

• 
  useReducer(reducer, initialState)
  
  
  
  
  • An alternative to useState for managing more complex state logic.
    
  
  
  
  
  
  

  const [state, dispatch] = useReducer(reducer, initialState);

• 
  useCallback(callback, dependencies)
  
  
  
  
  • Returns a memoized version of a callback function, useful for optimizing child components that rely on reference equality.
    
  
  
  
  
  
  

  const memoizedCallback = useCallback(() => {

    doSomething();

  }, [dependencies]);

• 
  useMemo(create, dependencies)
  
  
  
  
  • Returns a memoized value, used for optimizing expensive calculations.
    
  
  
  
  
  
  

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 
  useRef(initialValue)
  
  
  
  
  • Returns a mutable ref object, which persists between renders.
  
  
  • Useful for accessing DOM elements or storing mutable values.
    
  
  
  
  
  
  

  const inputRef = useRef();

• 
  useImperativeHandle(ref, createHandle, dependencies)
  
  
  
  
  • Customizes the instance value that is exposed when using ref with forwardRef.
    
  
  
  
  
  
  

  useImperativeHandle(ref, () => ({

    focus: () => inputRef.current.focus()

  }));

• 
  

  useLayoutEffect(callback, dependencies)

  
  
  
  
  
  • Similar to useEffect, but fires synchronously after all DOM mutations.
  
  
  • Useful for reading layout from the DOM and synchronously re-rendering.
  
  
  
  
  
  



• 
  
  

  useDebugValue(value)

  
  
  
  
  
  • Can be used to display a label in React DevTools for custom hooks.
    
  
  
  
  
  
  

  useDebugValue(isOnline ? 'Online' : 'Offline');

3. Event Handling Methods

React provides methods for handling events, similar to regular DOM event handling, but with some differences:

• onClick


• onChange


• onSubmit


• onFocus


• onBlur


• onKeyPress

Example:

function handleClick() {

  console.log('Button clicked');

}



<button onClick={handleClick}>Click Me</button>;

4. Other React Methods

These are additional methods you may find useful:

• 
  

  React.createRef()

  
  
  
  
  
  • Used to create refs in class components.
  
  
  
  
  
  



• 
  
  

  React.forwardRef()

  
  
  
  
  
  • Pass refs to child components.
  
  
  
  
  
  



• 
  
  

  React.memo(Component)

  
  
  
  
  
  • A higher-order component that prevents re-rendering if props haven't changed.
  
  
  
  
  
  



• 
  
  

  React.lazy()

  
  
  
  
  
  • Used for code-splitting and lazy loading components.
  
  
  
  
  
  



• 
  
  

  React.Suspense

  
  
  
  
  
  • Used in combination with React.lazy() to show a fallback while loading a lazy component.
  
  
  
  
  
  

5. React Router Methods (for Routing)

• 
  useNavigate() (React Router v6)


• useParams()


• useLocation()


• useMatch()

Example:

const navigate = useNavigate();

navigate('/path');

6. Prop Types and Default Props

• 
  

  propTypes

  
  
  
  
  
  • Used to validate the type of props passed to a component.
  
  
  
  
  
  



• 
  
  

  defaultProps

  
  
  
  
  
  • Used to set default values for props.
  
  
  
  
  
  

Example:

MyComponent.propTypes = {

  name: PropTypes.string,

};



MyComponent.defaultProps = {

  name: 'Guest',

};

Conclusion

• 
  Class components are more traditional and use lifecycle methods.


• 
  Functional components leverage hooks and are generally preferred in modern React development due to their simplicity and performance benefits.

Use class components when you need fine-grained control over component lifecycle and hooks when you want a simpler and cleaner API.