Skip to content
BSWEN
Blog

How do I read and refactor other developers' React code effectively?

Cowrie
Cowrie
Dev @ Bswen

I spent my first year building React apps from scratch. Clean architecture, perfect folder structure, everything followed best practices. Then I got my first real job and faced a codebase that looked nothing like my tutorials.

The components were scattered. State management was a mix of Redux, Context, and random useState calls scattered everywhere. Half the components were class-based, half were functional. I stared at the screen wondering: how do I even begin to understand this?

That’s when I realized the real skill isn’t building new apps. It’s reading and safely modifying existing ones.

The Mindset Shift I Had to Make

When I read my own code, I already know the context. I remember why I made each decision. But reading someone else’s code? That’s archaeology, not programming.

I learned to abandon my assumptions. That “weird” pattern I wanted to refactor immediately? It probably solved a problem I hadn’t discovered yet. The missing documentation? The code itself became my documentation.

My Systematic Approach to Reading React Code

Phase 1: Understand the Architecture (30 minutes)

Before touching any component, I map out the project structure:

Project structure overview
package.json          # Dependencies reveal the tech stack
src/
  components/         # Reusable UI components
  features/           # Feature-based organization
  hooks/              # Custom hooks
  utils/              # Utility functions
  types/              # TypeScript definitions
  contexts/           # React contexts
  store/              # State management

I ask myself:

  • What state management approach is used?
  • Is TypeScript strict or loose?
  • What testing framework exists?
  • How are routes organized?

Phase 2: Trace Data Flow (1-2 hours)

I start from the entry point and follow the data:

App.tsx
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Provider store={store}>
        <Router>
          <Routes>
            {/* I trace each route to its component */}
          </Routes>
        </Router>
      </Provider>
    </QueryClientProvider>
  )
}

I identify:

  1. Context providers and what data they provide
  2. API calls and how data enters the application
  3. State management: where state lives, how it updates
  4. Data flow from API to component to UI

Phase 3: Component Deep Dive

For the specific component I need to understand, I follow a checklist:

Component analysis
export function UserDashboard({ userId, permissions }: UserDashboardProps) {
  // 1. What state does this component manage?
  const [selectedTab, setSelectedTab] = useState('overview');


  // 2. What external data does it need?
  const { data: user } = useQuery(['user', userId], fetchUser);
  const theme = useContext(ThemeContext);


  // 3. What side effects exist?
  useEffect(() => {
    // Why this effect? What problem does it solve?
  }, [userId]);


  // 4. What events does it handle?
  const handleTabChange = (tab: string) => {
    setSelectedTab(tab);
  };


  // 5. What does it render?
  return (
    <div className="dashboard">
      {/* Trace each child component */}
    </div>
  );
}

Tools That Changed Everything

React DevTools

This became my most valuable tool. The Components tab shows me:

  • Visual component tree hierarchy
  • Props and state for each component
  • Which components re-render (highlight updates)
  • Where a component is rendered

GitHub Navigation

I learned keyboard shortcuts that saved hours:

GitHub shortcuts
t          # Search for files by name
b          # Open blame view
.          # Open in GitHub.dev

The blame view is crucial. It shows me:

  • When code was written
  • The PR/commit that introduced changes
  • Commit messages explaining decisions
Search patterns
filename:tsx useEffect       # Find all useEffect hooks
filename:tsx useState user   # Find user-related state
extension:tsx "interface"    # Find TypeScript interfaces
path:src/components          # Search within specific path

Debugging Strategies I Use

When I can’t understand code by reading, I add strategic logging:

Debug logging
function MysteryComponent({ data }) {
  console.log('MysteryComponent props:', data);


  useEffect(() => {
    console.log('Effect triggered with:', data.id);
  }, [data.id]);


  const handleClick = () => {
    debugger; // Browser pauses here
    processData(data);
  };
}

I also create isolation tests to understand component behavior:

Isolation test
describe('MysteryComponent behavior', () => {
  it('renders with minimal props', () => {
    render(<MysteryComponent data={{ id: '1' }} />);
    // What renders? Check the DOM.
  });


  it('handles click events', () => {
    const onClick = jest.fn();
    render(<MysteryComponent data={{ id: '1' }} onClick={onClick} />);
    fireEvent.click(screen.getByRole('button'));
    // What happens? Check the mock calls.
  });
});

The Golden Rule of Refactoring

I learned this the hard way: make one change at a time.

Bad: Multiple changes at once
function UserList({ users }) {
  // Changed: useState -> useReducer, added memoization, renamed variables
  const [state, dispatch] = useReducer(reducer, initialState);
  const filteredUsers = useMemo(() => users.filter(active), [users]);


  return (
    <div>
      {filteredUsers.map(u => <UserCard key={u.id} user={u} />)}
    </div>
  );
}

When something breaks, I have no idea which change caused it.

Good: One change at a time
// Step 1: Add TypeScript types
function UserList({ users }: { users: User[] }) {
  return (
    <div>
      {users.map(user => <UserCard key={user.id} user={user} />)}
    </div>
  );
}
// Verify tests pass, commit


// Step 2: Add memoization
function UserList({ users }: { users: User[] }) {
  const filteredUsers = useMemo(() => users.filter(isActive), [users]);
  return (
    <div>
      {filteredUsers.map(user => <UserCard key={user.id} user={user} />)}
    </div>
  );
}
// Verify tests pass, commit

My Refactoring Checklist

Before I touch any code:

  • Understand what the code does (read, trace, test)
  • Identify why it exists (git blame, comments, tests)
  • Document current behavior (write tests if missing)
  • Identify constraints and dependencies
  • Plan the change (small, incremental steps)

During refactoring:

  • Make one change at a time
  • Run tests after each change
  • Commit working changes frequently
  • Keep a rollback point

After refactoring:

  • All tests pass
  • No regressions in manual testing
  • Code review for correctness
  • Update documentation if needed

Common Refactoring Patterns I Use

Extract and Delegate

I safely refactor large components by extracting logic:

Extract hook pattern
// Original: Monolithic component
function UserDashboard({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);


  useEffect(() => {
    setLoading(true);
    fetchUser(userId)
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [userId]);


  if (loading) return <Spinner />;
  if (error) return <Error message={error.message} />;


  return (
    <div>
      <UserHeader user={user} />
      <UserStats user={user} />
    </div>
  );
}


// Step 1: Extract data fetching to custom hook
function useUser(userId) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);


  useEffect(() => {
    setLoading(true);
    fetchUser(userId)
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [userId]);


  return { user, loading, error };
}


function UserDashboard({ userId }) {
  const { user, loading, error } = useUser(userId);


  if (loading) return <Spinner />;
  if (error) return <Error message={error.message} />;


  return (
    <div>
      <UserHeader user={user} />
      <UserStats user={user} />
    </div>
  );
}

Prop Drilling to Context

Context refactoring
// Before: Prop drilling through multiple levels
function App() {
  const [user, setUser] = useState(null);
  return <Layout user={user} setUser={setUser} />;
}


function Layout({ user, setUser }) {
  return (
    <div>
      <Header user={user} setUser={setUser} />
      <Main user={user} setUser={setUser} />
    </div>
  );
}


// After: Context for shared state
const UserContext = createContext(null);


function App() {
  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Layout />
    </UserContext.Provider>
  );
}


function Header() {
  const { user, setUser } = useContext(UserContext);
  return <UserMenu user={user} setUser={setUser} />;
}

Class to Functional Component

Class to functional
// Before: Class component
class UserProfile extends React.Component {
  state = { editing: false };


  handleEdit = () => {
    this.setState({ editing: true });
  };


  render() {
    const { user } = this.props;
    const { editing } = this.state;


    return editing ? (
      <EditForm user={user} onSave={this.handleSave} />
    ) : (
      <ViewProfile user={user} onEdit={this.handleEdit} />
    );
  }
}


// After: Functional component
function UserProfile({ userId, user }) {
  const [editing, setEditing] = useState(false);


  const handleEdit = useCallback(() => {
    setEditing(true);
  }, []);


  return editing ? (
    <EditForm user={user} onSave={handleSave} />
  ) : (
    <ViewProfile user={user} onEdit={handleEdit} />
  );
}

A Debugging Hook I Built

I created a custom hook to understand component behavior:

Debug hook
function useDebugComponent(name: string, props: Record<string, any>) {
  const renderCount = useRef(0);
  const prevProps = useRef(props);


  // Log render count
  useEffect(() => {
    renderCount.current += 1;
    console.log(`[${name}] Render #${renderCount.current}`);
  });


  // Log prop changes
  useEffect(() => {
    const changedProps = Object.keys(props).filter(
      key => !Object.is(prevProps.current[key], props[key])
    );


    if (changedProps.length > 0) {
      console.log(`[${name}] Props changed:`, changedProps.map(key => ({
        key,
        from: prevProps.current[key],
        to: props[key],
      })));
    }


    prevProps.current = props;
  }, [name, props]);


  return { renderCount };
}


// Usage
function MysteryComponent({ userId, filters }) {
  const { renderCount } = useDebugComponent('MysteryComponent', { userId, filters });


  // Now I can see:
  // - How many times the component renders
  // - Which props changed between renders
}

What I Learned

Reading and refactoring React code written by others is the skill that separates job-ready developers from tutorial followers. It requires:

  1. Systematic reading - Start with architecture, trace data flow, then dive into components
  2. Tool mastery - React DevTools, GitHub navigation, debugging techniques
  3. Incremental refactoring - One change at a time, test after each change
  4. Pattern recognition - Reading diverse codebases builds mental models

The best advice I received: stop building greenfield to-do apps and refactor a messy, undocumented open-source codebase instead. That’s where real learning happens.

The goal isn’t to refactor everything to be “perfect.” The goal is to make targeted improvements that solve real problems while maintaining system stability. Every production codebase has constraints and history that shaped its current state. Respect that context while improving code quality incrementally.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!

Comments

Tags: