React Component Patterns

Component Structure

Follow this order in every component file:

// 1. External imports import { useState } from 'react'; import { useQuery } from '@tanstack/react-query';

// 2. Internal shared imports import { Button } from '@/shared/ui/button'; import { useAuth } from '@/shared/hooks/useAuth';

// 3. Feature-specific imports import { usePostEditor } from '../hooks/usePostEditor';

// 4. Types interface PostEditorProps { boardId: string; initialContent?: string; }

// 5. Component export function PostEditor({ boardId, initialContent }: PostEditorProps) { // hooks first // derived state // handlers // render }

Custom Hooks Pattern

Place business logic in [feature]/hooks/ :

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { createPost } from '../api/post';

export function usePostEditor(boardId: string) { const queryClient = useQueryClient();

const createMutation = useMutation({ mutationFn: (data: CreatePostData) => createPost(boardId, data), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['posts', boardId] }); }, });

return { createMutation }; }

Path Aliases

import { Component } from '@/shared/components/Component'; import { useHook } from '@board/hooks/useHook'; import { Post } from '@post/model/Post';

// Available: @/, @board/, @post/, @comment/, @draft/, // @notification/, @user/, @shared/, @login/, @stats/

Quick Reference

Location Purpose

[feature]/components/

React components

[feature]/hooks/

Custom hooks with business logic

[feature]/model/

TypeScript types

@/shared/ui/

shadcn/ui components

@/shared/hooks/

Shared hooks