Understand the difference between data passed into a component and data it manages over time.
The core idea
Props are inputs from a parent. State represents information a component owns that can change and trigger a render. Keeping a single source of truth prevents different components from showing conflicting versions of the same data.
A practical way to approach it
Pass read-only values through props, keep state near the component that owns the interaction, and lift state when sibling components must coordinate. Derive values from existing state instead of storing redundant copies.
Try it in a small project
Build a search box and result list. Keep the query in one state variable, pass it to the filter logic, and derive the visible results instead of maintaining a second list that can become stale.
Common mistakes to avoid
Do not mutate state objects directly. Avoid placing all application data in global state when local state is sufficient.
Key takeaway
Keep the first version small, make your assumptions explicit, and verify the result with a repeatable test. For production use, check the current official documentation for the tools and versions you choose.