Rendering

Rendering refers to the process of displaying or updating the user interface of a web application. $render uses $render(Component, props) utility to achieve React like rendering without a virtual DOM.

Rendering and re-rendering often change the state of elements in a component. Learn more (opens in a new tab).

Conditional rendering

You can render your components based on some conditions using if, && and ?: operators.

Conditional rendering with if statements

You can render different forms of elements and components based on some certain conditions using if statements.

conditionally render elements with if statements

if (hasPaid) {
  return `<li class="item">${name} ✔</li>`;
}
return `<li class="item">${name}</li>`;

conditionally render components with if statements

if (isAmerica) {
  return `<OriginalItem />`;
}
return `<InferiorItem />`;

Conditional rendering with the logical AND operator &&

You can conditionally render attributes, contents and component using && when you only want the first operand to be the condition and the second operand the value to render.

conditionally render content with the logical AND operator &&

return`
  <li className="item">
    ${name} ${hasPaid && '✔'}
  </li>
`;

conditionally render attributes with the logical AND operator &&

return`
  <li class="${ hasPaid && 'paid' }">
    Rice
  </li>
`;

conditionally render components with the logical AND operator &&

return`
  <li class="item">
    ${ isAmerica && '<OriginalItem />' }
  </li>
`;

Conditional rendering with the ternary operator ?:

You can use the ternary operator to conditionally render attributes, contents or components.

conditionally render content

return`
  <li className="item">
    ${ hasPaid ? name + ' ✔' : name}
  </li>
`;

conditionally render attributes

return`
  <li class="${ hasPaid ? 'paid' : '' }">
    Rice
  </li>
`;

conditionally render components

return`
  <li class="item">
    ${isAmerica ? '<OriginalItem />' : '<InferiorItem />'}
  </li>
`;

Harmonious rendering

An harmonious rendering happens when all nested functions and children components depend on their parent component for arguments or props. They do not have independent arguments or props of their own.

const Profile = memoize(({user}) => {
  const modifyName = memoize((user) => `Mr. ${user.name}`);
  const giveBadge = () => 'Badge';
  return`
   <div>
      ${modifyName(user)}
      ${giveBadge()}
   </div> 
  `
});

The component above is harmonious as the functions within it either take its props as an argument or take no argument. You can memoize an harmonious component or any of its content without worrying about any issue.

Disjointed rendering

A disjointed rendering is the opposite of Harmonious Rendering as it only happens when some or all nested functions and children components have their own props or arguments which do not come from their parent component.

const Profile = ({user}) => {
  const toggle = (status=false) => !status;
  const giveBadge = () => 'Badge';
  return`
   <div>
      ${toggle()}
      ${giveBadge()}
   </div> 
  `
};

Memoizeing a disjointed component requires you to be extra careful to avoid unexpect challenges.

Props Resumability