DEV Community: Asif Vora

API Status code

Asif Vora — Wed, 21 Jun 2023 05:29:24 +0000

Status Codes

HTTP status codes are three-digit numbers returned by a server to indicate the status of a requested HTTP transaction. Here are some common status codes

1XX Informational:

100 Continue
101 Switching Protocols
102 Processing

2XX Success:

200 OK
201 Created
202 Accepted
203 Non-authoritative Information
204 No Content
205 Reset Content
206 Partial Content
207 Multi-Status
208 Already Reported
226 IM Used

3XX Redirectional:

300 Multiple Choices
301 Moved Permanently
302 Found
303 See Other
304 Not Modified
305 Use Proxy
307 Temporary Redirect
308 Permanent Redirect

4XX Client Error:

400 Bad Request
401 Unauthorized
402 Payment Required
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable
407 Proxy Authentication Required
408 Request Timeout
409 Conflict
410 Gone
411 Length Required
412 Precondition Failed
413 Payload Too Large
414 Request-URI Too Long
415 Unsupported Media Type
416 Requested Range Not Satisfiable
417 Expectation Failed
418 I'm a teapot
421 Misdirected Request
422 Unprocessable Entity
423 Locked
424 Failed Dependency
426 Upgrade Required
428 Precondition Required
429 Too Many Requests
431 Request Header Fields Too Large
444 Connection Closed Without Response
451 Unavailable For Legal Reasons
499 Client Closed Request

5XX Server Error:

500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported
506 Variant Also Negotiates
507 Insufficient Storage
508 Loop Detected
510 Not Extended
511 Network Authentication Required
599 Network Connect Timeout Error

Optimize React Application Performance

Asif Vora — Thu, 29 Sep 2022 12:18:26 +0000

Use the Production Build
Profiling Components with the DevTools Profiler
Virtualize Long Lists (hundreds or thousands of rows) - react-window / react-virtualized
Avoid Reconciliation / Re-randor - shouldComponentUpdate
Not Mutating Data
Code Splitting - Multiple Chunk Files
Lazy Loading - Dynamic import
Lazy loading images in React
Use Route-Based Code Splitting
Avoid dangerouslySetInnerHTML
Dependency optimization - Moment.js / loadash / UI lib
Use React Fragments to Avoid Extra Tag
Avoid Async Initialization in componentWillMount() use componentDidMount()
Memoize React Components - React.PureComponent / React.memo
useMemo
useCallback
Throttling and Debouncing Events
Create Error Boundaries for the Components
Avoid using Index as Key for map - Using a Unique Key for Iteration
CSS Animation Instead of JavaScript Animation
Analyzing and Optimizing Your Webpack Bundle Bloat
Consider Server-side Rendering
Enable Gzip Compression on Web Server
Using a CDN - React / ReactDOM

React Hooks calling child component method from parent

Asif Vora — Wed, 25 Aug 2021 11:13:49 +0000

For calling Child Component method from parent component in hooks we are using React.forwardRef and React.useImperativeHandle hooks from React.

React.forwardRef

React.forwardRef creates a React component that forwards the ref attribute it receives to another component below in the tree. This technique is not very common but is particularly useful in two scenarios:

React.forwardRef accepts a rendering function as an argument. React will call this function with props and ref as two arguments. This function should return a React node.

For more information, see forwarding refs.

React.useImperativeHandle

useImperativeHandle customizes the instance value that is exposed to parent components when using ref. As always, imperative code using refs should be avoided in most cases. useImperativeHandle should be used with forwardRef:

Here comes the important part to call the child method.

Now we will just render the child component in the parent and create a ref using React.useRef with that the getAlert() function will be called.

import React from "react";
const { forwardRef, useRef, useState, useImperativeHandle } = React;

// We need to wrap component in `forwardRef` in order to gain
// access to the ref object that is assigned using the `ref` prop.
// This ref is passed as the second parameter to the function component.
const Child = forwardRef((props, ref) => {
  const [state, setState] = useState(0);

  const getAlert = () => {
    alert("getAlert from Child");
    setState(state => state + 1)
  };

  // The component instance will be extended
  // with whatever you return from the callback passed
  // as the second argument
  useImperativeHandle(ref, () => ({
    getAlert,
  }));

  return (
    <>
      <h1>Count {state}</h1>
      <button onClick={() => getAlert()}>Click Child</button>
      <br />
    </>
  );
});

export const Parent = () => {
  // In order to gain access to the child component instance,
  // you need to assign it to a `ref`, so we call `useRef()` to get one
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click Parent</button>
    </div>
  );
};

Child component is rendered and a ref is created using React.useRef named childRef. The button we created in parent component is now used to call the child component function childRef.current.getAlert();

Reference

https://reactjs.org/
https://stackoverflow.com/