RecipeRiot Blog

Q : What is the the differences between uncontrolled and controlled components?

Uncontrolled Components : It is similar to the traditional HTML form inputs. where the form element's data is handled by the DOM. It maintains their own state and will be updated when the input value changes.

Controlled Components : In the controlled component the form input element’s values are totally driven by event handlers. Here it is bound to a value, and its changes will be handled in code by using event-based callbacks. The input form element is handled by the react itself rather than the DOM.

Q : How to validate React props using PropTypes?

PropTypes is a package that allows to define the expected types of props that the React component should receive.

Here’s how you can use it:

  • Import PropTypes from the prop-types package.
  • Define the expected propTypes for component by adding a propTypes object to your component.
  • In the propTypes object, each property represents a prop that the component expects to receive.
  • After defined the propTypes for the component, if a prop is passed to a component that doesn’t match the defined propTypes, it will give a warning in the console.

Q : What is the difference between nodejs and express js?

Node.js: Node.js is an open source and cross-platform runtime environment for executing JavaScript code outside of a browser.

Express.js: Express is a small framework that sits on top of Node.js’s web server functionality to simplify its APIs and add helpful new features. It makes it easier to organize your application’s functionality with middle ware and routing.

Node.jsExpress.js
It is used to build server-side, input-output, event-driven apps.It is used to build web-apps using approaches and principles of Node.js.
It is built on Google’s V8 engine.It is built on Node.js.
It requires more coding time.It requires less coding time.

Q : What is a custom hook, and why will you create a custom hook?

Custom Hooks: Custom hooks are reusable functions that can use to add special and unique functionality to the React applications.

Custom React JS hooks offer reusability as when a custom hook is created, it can be reused easily, which makes the code cleaner and reduces the time to write the code. It also enhances the rendering speed of the code as a custom hook does not need to be rendered again and again while rendering the whole code.