A couple weeks ago I started learning on React js. Not only was it my first React application, but it was also my first React js application, so a lot was new to me all in one go.

here are a few things I wish I knew before I got started.

What’s the difference between a library and a framework?

Let’s use an analogy of trying to build a house. With a framework, you’re essentially given all the materials to build that house, and it’s up to you in what arrangement you put them in. You will very rarely need to step outside the materials you have been given to use something third-party and, in some cases, you may not be allowed to step outside the materials.

With a library, on the other hand, you start with essentially nothing. The library’s materials are a limited set in comparison to a framework’s materials, and you can pick/choose when you want to use them and when you want to step outside that and use third-party materials.

React is a library not a framework

I sort of assumed this was more of a technicality, rather than a key piece of information around which I should redefine my expectations.

React is a UI library

React is a not only a library, it’s specifically for User Interfaces.for the most part, doesn’t change the way you write Javascript that isn’t directly related to your UI, but it heavily controls the way you write HTML and CSS (or the equivalent of it).

useEffect is a major 🔑

The code within a useEffect() block runs on each re-render, we can choose to execute them only when certain values have changed or just once. We do this by passing a second argument to useEffect(), with an array of variables that, if their value should change, we want the function to be run again.

const BetterExamplePage = (props) => {

    const [user, setUser] = useState();

    useEffect(() => {
        getUser().then((u) => setUser(u));
    }, [ /* dependencies */ ]);

    return (
        …
    );
};

If we leave the array empty, that effectively means that the function will only run once.