DOCSEARCHbyAlgolia
Submit Docs

Antsomi Application Team Documentation

website·Indexed 31 days ago

https://antsomi-docs.vercel.app/

Development guidelines and internal packages for the Antsomi Application Team. Includes coding style guides for React.js and JavaScript, conventions for Git branch naming and conventional commits, and documentation for internal packages such as @antscorp/antsomi-utils, @antscorp/antsomi-hooks, @antscorp/antsomi-locales, and eslint-config-antsomi.

Tokens
10.5K
Snippets
77
Records
100
Agent score
75%

What's inside Antsomi

  1. Overview of @antscorp/antsomi-locales for multilingual support

    @antscorp/antsomi-locales is a TypeScript-bundled library that simplifies UI translation using i18n. It is designed to remove the need for managing providers and repetitive boilerplate code. Because it does not rely on providers, it is compatible with both React and non-React projects.

  2. Overview of eslint-config-antsomi

    eslint-config-antsomi is a configurable set of ESLint rules used to enforce consistent coding styles and best practices in JavaScript codebases. It is designed to integrate with ESLint to help developers write cleaner, more maintainable code, reduce common errors, and ensure industry-standard quality control across a team's codebase.

  3. Optimize performance with Automatic Batching in React 18

    React 18 automatically batches multiple state updates that occur within the same event loop. Instead of triggering a re-render for every individual state change, React groups them into a single batch update, reducing unnecessary re-renders and improving overall application performance.

  4. Improve initial load and SEO with React 18 Server-Side Rendering (SSR)

    React 18 enhances Server-Side Rendering (SSR) by making the process of rendering components on the server more efficient and flexible. This results in faster initial page loads and better search engine optimization (SEO) compared to client-side rendering.

  5. Improve event handling performance with the React 18 Event Delegation Model

    React 18 implements a new event delegation model where a single event listener is attached to a parent element to handle events for all child elements. This replaces the previous method of attaching listeners to individual DOM elements, significantly reducing the total number of event listeners and improving performance in applications with many interactive elements.

  6. Handle loading states with Suspense for Data Fetching in React 18

    React 18 introduces Suspense for data fetching, which allows developers to display a loading indicator (fallback UI) while the application waits for data to be retrieved from an external API or database. It also provides a mechanism to handle data-fetching errors gracefully by displaying error messages.

  7. Apply general React component architecture rules

    Follow these fundamental rules for React component structure:

    • Only include one React component per file (except for stateless/pure components).
    • Always use JSX syntax; avoid React.createElement unless initializing the app from a non-JSX file.
    • When defining prop types, avoid generic arrays and objects. Use arrayOf, objectOf, or shape to explicitly define the contents.

  8. Use useDeepCompareEffect for non-primitive dependencies

    useDeepCompareEffect is a custom hook based on useEffect that allows the use of non-primitive dependencies (such as objects or arrays). Unlike the standard useEffect, which performs a shallow reference check, this hook ensures the effect only re-runs when the actual content of the dependencies changes.
    import { useDeepCompareEffect } from '@antscorp/antsomi-hooks'
import { createConnection } from './chat.js'

interface ChatRoomProps {
  options: Record<string, string | number>
}

function ChatRoom({ options }: ChatRoomProps) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234')

  useDeepCompareEffect(() => {
    const connection = createConnection(serverUrl, options)
    connection.connect()
    return () => {
      connection.disconnect()
    }
  }, [serverUrl, options])

  return <div>Your component</div>
}

  9. Handle Props and Image accessibility

    Guidelines for props and accessibility:

    • Boolean Props: Omit the value when a prop is explicitly true (e.g., <Foo hidden /> instead of <Foo hidden={true} />).
    • Image Alt Text: Always include an alt prop on <img> tags. For presentational images, use an empty string (alt="") or add role="presentation".
    // Good: Boolean prop
<Foo hidden />

// Good: Accessibility
<img src="hello.jpg" alt="Me waving hello" />
<img src="hello.jpg" role="presentation" />

  12. Use rest parameters instead of the arguments object

    Avoid using the arguments object. Use the ES6 rest syntax (...args) instead. Rest parameters are real Arrays, whereas arguments is only array-like, making the code more explicit and flexible.
    // bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

// good
function concatenateAll(...args) {
  return args.join('');
}