Feature-based
- React Native course
- Expert
- Lesson 13/47
- 5 min
Learn feature-based architecture.
Feature-based architecture
Feature-based architecture groups code by feature, not by technical layer. Each feature (e.g. auth, profile, cart) lives in its own folder; its components, hooks, services and types stay together.
This approach makes finding files easier in large apps. Moving or removing a feature is a single folder operation. A features/ root folder is a common layout.
Folder structure
A typical features/auth folder contains: components/ (LoginButton, LoginForm), hooks/ (useAuth), services/ (authService) and types.ts. Everything specific to the feature lives here.
Another feature should not depend on this folder directly; shared code goes into shared/ or common/. This keeps features loosely coupled.
Practice useAuth hook
Write a useAuth hook. It should return user and login; both start as null and an empty function. Export the hook with export.
Starter code
import React, { useState } from 'react';
// Write the useAuth hook here
export default useAuth;Sample solution
import React, { useState } from 'react';
const useAuth = () => {
const [user, setUser] = useState(null);
const login = () => {};
return { user, login };
};
export default useAuth;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Where does the 'auth' feature live in a feature-based architecture?
- In a features/auth/ folder Correct answer
- Under src/components/
- Inside node_modules
- In the android/ folder
Explanation: Each feature lives in its own folder.
2 Write the feature folder name
features/____/components/LoginButton.tsxfeatures/auth/components/LoginButton.tsxExplanation: The auth feature lives under features/auth/.
3 Match the folder contents
| Term | Meaning |
|---|---|
components |
Components |
hooks |
useXxx functions |
services |
Data/service layer |
types.ts |
TypeScript types |