How to fix Cannot read properties of null (reading "props") in React

// Bad - no null check
function UserProfile({ user }) {
  return <div>{user.name}</div>; // Crashes if user is null
}

// Good - conditional rendering
function UserProfile({ user }) {
  if (!user) {
    return <div>Loading...</div>;
  }
  return <div>{user.name}</div>;
}

// Good - optional chaining
function UserProfile({ user }) {
  return <div>{user?.name ?? 'Unknown'}</div>;
}

// Bad - null initialization
const [data, setData] = useState(null);

// Good - proper default values
const [data, setData] = useState({});
const [items, setItems] = useState([]);
const [user, setUser] = useState({ name: '', email: '' });

// For data fetching, use a loading flag
const [user, setUser] = useState(null);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  fetchUser().then(data => {
    setUser(data);
    setIsLoading(false);
  });
}, []);

if (isLoading) return <div>Loading...</div>;
if (!user) return <div>User not found</div>;
return <div>{user.name}</div>;

// Bad - method loses context
class MyComponent extends React.Component {
  handleClick() {
    console.log(this.props); // this is undefined
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

// Good - arrow function property
class MyComponent extends React.Component {
  handleClick = () => {
    console.log(this.props); // this is correctly bound
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

// Good - bind in constructor
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this.props); // this is correctly bound
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true;

    fetchData().then(result => {
      if (isMounted) {
        setData(result);
      }
    });

    // Cleanup function
    return () => {
      isMounted = false;
    };
  }, []);

  return data ? <div>{data.value}</div> : <div>Loading...</div>;
}

// For timers and intervals
function TimerComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);

    // Clear timer on unmount
    return () => clearInterval(timer);
  }, []);

  return <div>{count}</div>;
}

// Using PropTypes
import PropTypes from 'prop-types';

function UserCard({ user }) {
  return <div>{user.name}</div>;
}

UserCard.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired
  }).isRequired
};

// Using TypeScript
interface User {
  name: string;
  email: string;
}

interface UserCardProps {
  user: User;
}

function UserCard({ user }: UserCardProps) {
  return <div>{user.name}</div>;
}

// With optional props
interface UserCardProps {
  user?: User | null;
}

function UserCard({ user }: UserCardProps) {
  if (!user) return <div>No user data</div>;
  return <div>{user.name}</div>;
}

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error caught by boundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>Something went wrong</h2>
          <p>{this.state.error?.message}</p>
        </div>
      );
    }

    return this.props.children;
  }
}

// Usage
function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}