Components are reusable pieces of jsx which depend on some input properties and get rerendered whenever those properties change.
React has two types of components: function components and class components (those which extend React.Component). Historically, class components were used for components with state and function components were stateless. Today, function components can also have state using hooks and should be preferred for new code.
https://beta.reactjs.org/learn/managing-state State can be managed in several ways:
useStateallows you to define a state variable, similar to a class property, which will trigger a rerender.
useReducerallows you to refractor state manipulation to a separate reducer function outside of your component.
useEffectallows you to setup and remove listeners. These always run on the client in SSR variants of React.
useRefreturns a reference to an object with a
currentparameter which allows you to have state without rerendering.
Every time any properties or state changes, your function component will be rerendered.
Therefore, you cannot rely on local variables to hold their state.
Additionally, you must call
useState identically across renders (i.e. not conditionally), ideally near the top of your function.
Note that the state of the function is tied to their position in the React virtual dom. A single component rendered multiple times will have different state.
Next.js allows you to use React with server-side rendering.