diff --git a/example/src/Stress/index.tsx b/example/src/Stress/index.tsx
index e562ed50..e8bc9323 100644
--- a/example/src/Stress/index.tsx
+++ b/example/src/Stress/index.tsx
@@ -55,14 +55,7 @@ const StressFlow = () => {
   }, []);
 
   return (
-    <ReactFlow
-      onlyRenderVisibleElements
-      nodes={nodes}
-      edges={edges}
-      onLoad={onLoad}
-      onConnect={onConnect}
-      onNodesChange={onNodesChange}
-    >
+    <ReactFlow nodes={nodes} edges={edges} onLoad={onLoad} onConnect={onConnect} onNodesChange={onNodesChange}>
       <MiniMap />
       <Controls />
       <Background />
diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx
index 0e9555e1..eadf55f8 100644
--- a/src/components/Edges/wrapEdge.tsx
+++ b/src/components/Edges/wrapEdge.tsx
@@ -24,7 +24,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     data,
     onClick,
     onEdgeDoubleClick,
-    isSelected,
+    selected,
     animated,
     label,
     labelStyle,
@@ -70,7 +70,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
       'react-flow__edge',
       `react-flow__edge-${type}`,
       className,
-      { selected: isSelected, animated, inactive, updating },
+      { selected, animated, inactive, updating },
     ]);
 
     const edgeElement = useMemo<Edge>(() => {
@@ -222,7 +222,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           id={id}
           source={source}
           target={target}
-          isSelected={isSelected}
+          selected={selected}
           animated={animated}
           label={label}
           labelStyle={labelStyle}
diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
index da2f507e..f700f106 100644
--- a/src/components/Nodes/wrapNode.tsx
+++ b/src/components/Nodes/wrapNode.tsx
@@ -23,7 +23,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     scale,
     xPos,
     yPos,
-    isSelected,
+    selected,
     onClick,
     onMouseEnter,
     onMouseMove,
@@ -45,7 +45,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     isInitialized,
     snapToGrid,
     snapGrid,
-    isDragging,
+    dragging,
     resizeObserver,
     dragHandle,
     zIndex,
@@ -74,7 +74,6 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         ...style,
       }),
       [
-        isSelected,
         xPos,
         yPos,
         isSelectable,
@@ -91,28 +90,28 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     );
 
     const onMouseEnterHandler = useMemo(() => {
-      if (!onMouseEnter || isDragging) {
+      if (!onMouseEnter || dragging) {
         return;
       }
 
       return (event: MouseEvent) => onMouseEnter(event, node);
-    }, [onMouseEnter, isDragging, node]);
+    }, [onMouseEnter, dragging, node]);
 
     const onMouseMoveHandler = useMemo(() => {
-      if (!onMouseMove || isDragging) {
+      if (!onMouseMove || dragging) {
         return;
       }
 
       return (event: MouseEvent) => onMouseMove(event, node);
-    }, [onMouseMove, isDragging, node]);
+    }, [onMouseMove, dragging, node]);
 
     const onMouseLeaveHandler = useMemo(() => {
-      if (!onMouseLeave || isDragging) {
+      if (!onMouseLeave || dragging) {
         return;
       }
 
       return (event: MouseEvent) => onMouseLeave(event, node);
-    }, [onMouseLeave, isDragging, node]);
+    }, [onMouseLeave, dragging, node]);
 
     const onContextMenuHandler = useMemo(() => {
       if (!onContextMenu) {
@@ -128,7 +127,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
           if (isSelectable) {
             unsetNodesSelection();
 
-            if (!isSelected) {
+            if (!selected) {
               addSelectedElements([node]);
             }
           }
@@ -136,7 +135,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
           onClick?.(event, node);
         }
       },
-      [isSelectable, isSelected, isDraggable, onClick, node]
+      [isSelectable, selected, isDraggable, onClick, node]
     );
 
     const onDragStart = useCallback(
@@ -146,15 +145,15 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         if (selectNodesOnDrag && isSelectable) {
           unsetNodesSelection();
 
-          if (!isSelected) {
+          if (!selected) {
             addSelectedElements([node]);
           }
-        } else if (!selectNodesOnDrag && !isSelected && isSelectable) {
+        } else if (!selectNodesOnDrag && !selected && isSelectable) {
           unselectNodesAndEdges();
           unsetNodesSelection();
         }
       },
-      [node, isSelected, selectNodesOnDrag, isSelectable, onNodeDragStart]
+      [node, selected, selectNodesOnDrag, isSelectable, onNodeDragStart]
     );
 
     const onDrag = useCallback(
@@ -166,7 +165,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
           onNodeDrag(event as MouseEvent, node);
         }
 
-        updateNodePosition({ id, isDragging: true, diff: { x: draggableData.deltaX, y: draggableData.deltaY } });
+        updateNodePosition({ id, dragging: true, diff: { x: draggableData.deltaX, y: draggableData.deltaY } });
       },
       [id, node, onNodeDrag]
     );
@@ -175,8 +174,8 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       (event: DraggableEvent) => {
         // onDragStop also gets called when user just clicks on a node.
         // Because of that we set dragging to true inside the onDrag handler and handle the click here
-        if (!isDragging) {
-          if (isSelectable && !selectNodesOnDrag && !isSelected) {
+        if (!dragging) {
+          if (isSelectable && !selectNodesOnDrag && !selected) {
             addSelectedElements([node]);
           }
 
@@ -187,12 +186,12 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
         updateNodePosition({
           id: node.id,
-          isDragging: false,
+          dragging: false,
         });
 
         onNodeDragStop?.(event as MouseEvent, node);
       },
-      [node, isSelectable, selectNodesOnDrag, onClick, onNodeDragStop, isDragging, isSelected]
+      [node, isSelectable, selectNodesOnDrag, onClick, onNodeDragStop, dragging, selected]
     );
 
     const onNodeDoubleClickHandler = useCallback(
@@ -226,7 +225,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       `react-flow__node-${type}`,
       className,
       {
-        selected: isSelected,
+        selected,
         selectable: isSelectable,
         parent: isParent,
       },
@@ -264,11 +263,11 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
               type={type}
               xPos={xPos}
               yPos={yPos}
-              isSelected={isSelected}
+              selected={selected}
               isConnectable={isConnectable}
               sourcePosition={sourcePosition}
               targetPosition={targetPosition}
-              isDragging={isDragging}
+              dragging={dragging}
               dragHandle={dragHandle}
               zIndex={zIndex}
             />
diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx
index e42bbc1f..bf46a6a2 100644
--- a/src/components/NodesSelection/index.tsx
+++ b/src/components/NodesSelection/index.tsx
@@ -20,7 +20,7 @@ const selector = (s: ReactFlowState) => ({
   transform: s.transform,
   selectedNodesBbox: s.selectedNodesBbox,
   selectionActive: s.selectionActive,
-  selectedNodes: s.nodes.filter((n) => n.isSelected),
+  selectedNodes: s.nodes.filter((n) => n.selected),
   snapToGrid: s.snapToGrid,
   snapGrid: s.snapGrid,
   updateNodePosition: s.updateNodePosition,
@@ -74,7 +74,7 @@ export default ({
           x: data.deltaX,
           y: data.deltaY,
         },
-        isDragging: true,
+        dragging: true,
       });
     },
     [onSelectionDrag, selectedNodes, updateNodePosition]
@@ -83,7 +83,7 @@ export default ({
   const onStop = useCallback(
     (event: MouseEvent) => {
       updateNodePosition({
-        isDragging: false,
+        dragging: false,
       });
 
       onSelectionDragStop?.(event, selectedNodes);
diff --git a/src/components/SelectionListener/index.tsx b/src/components/SelectionListener/index.tsx
index a4a92441..d2cfd097 100644
--- a/src/components/SelectionListener/index.tsx
+++ b/src/components/SelectionListener/index.tsx
@@ -9,8 +9,8 @@ interface SelectionListenerProps {
 }
 
 const selectedElementsSelector = (s: ReactFlowState) => ({
-  selectedNodes: s.nodes.filter((n) => n.isSelected),
-  selectedEdges: s.edges.filter((e) => e.isSelected),
+  selectedNodes: s.nodes.filter((n) => n.selected),
+  selectedEdges: s.edges.filter((e) => e.selected),
 });
 
 // This is just a helper component for calling the onSelectionChange listener.
diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx
index 738aa8e9..7d6329fc 100644
--- a/src/container/EdgeRenderer/index.tsx
+++ b/src/container/EdgeRenderer/index.tsx
@@ -167,7 +167,7 @@ const Edge = memo(
         type={edgeType}
         data={edge.data}
         onClick={onEdgeClick}
-        isSelected={!!edge.isSelected}
+        selected={!!edge.selected}
         animated={edge.animated}
         label={edge.label}
         labelStyle={edge.labelStyle}
diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
index 7876c1ec..d02dc5d6 100644
--- a/src/container/NodeRenderer/index.tsx
+++ b/src/container/NodeRenderer/index.tsx
@@ -85,7 +85,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
             isHidden={node.isHidden}
             xPos={internals?.positionAbsolute?.x || 0}
             yPos={internals?.positionAbsolute?.y || 0}
-            isDragging={node.isDragging}
+            dragging={node.dragging}
             isInitialized={isInitialized}
             snapGrid={snapGrid}
             snapToGrid={snapToGrid}
@@ -100,7 +100,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
             onNodeDrag={props.onNodeDrag}
             onNodeDragStop={props.onNodeDragStop}
             scale={scale}
-            isSelected={!!node.isSelected}
+            selected={!!node.selected}
             isDraggable={isDraggable}
             isSelectable={isSelectable}
             isConnectable={isConnectable}
diff --git a/src/hooks/useGlobalKeyHandler.ts b/src/hooks/useGlobalKeyHandler.ts
index 87b8a360..19743457 100644
--- a/src/hooks/useGlobalKeyHandler.ts
+++ b/src/hooks/useGlobalKeyHandler.ts
@@ -29,8 +29,8 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
 
   useEffect(() => {
     const { nodes, edges } = store.getState();
-    const selectedNodes = nodes.filter((n) => n.isSelected);
-    const selectedEdges = edges.filter((e) => e.isSelected);
+    const selectedNodes = nodes.filter((n) => n.selected);
+    const selectedEdges = edges.filter((e) => e.selected);
 
     if (deleteKeyPressed && (selectedNodes || selectedEdges)) {
       const connectedEdges = getConnectedEdges(selectedNodes, edges);
diff --git a/src/store/index.ts b/src/store/index.ts
index 570d3c3e..27764555 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -32,10 +32,10 @@ import { createNodeInternals } from './utils';
 
 const { Provider, useStore, useStoreApi } = createContext<ReactFlowState>();
 
-const createNodeOrEdgeSelectionChange = (isSelected: boolean) => (item: Node | Edge) => ({
+const createNodeOrEdgeSelectionChange = (selected: boolean) => (item: Node | Edge) => ({
   id: item.id,
   type: 'select',
-  isSelected,
+  selected,
 });
 
 const createStore = () =>
@@ -141,11 +141,11 @@ const createStore = () =>
 
       onNodesChange?.(nodesToChange);
     },
-    updateNodePosition: ({ id, diff, isDragging }: NodeDiffUpdate) => {
+    updateNodePosition: ({ id, diff, dragging }: NodeDiffUpdate) => {
       const { onNodesChange, nodes, nodeExtent, nodeInternals } = get();
 
       if (onNodesChange) {
-        const matchingNodes = nodes.filter((n) => !!(n.isSelected || n.id === id));
+        const matchingNodes = nodes.filter((n) => !!(n.selected || n.id === id));
 
         if (matchingNodes?.length) {
           onNodesChange(
@@ -153,7 +153,7 @@ const createStore = () =>
               const change: NodeDimensionChange = {
                 id: node.id,
                 type: 'dimensions',
-                isDragging: !!isDragging,
+                dragging: !!dragging,
               };
 
               if (diff) {
@@ -231,7 +231,7 @@ const createStore = () =>
     },
     unsetUserSelection: () => {
       const { userSelectionRect, nodes } = get();
-      const selectedNodes = nodes.filter((node) => node.isSelected);
+      const selectedNodes = nodes.filter((node) => node.selected);
 
       const stateUpdate = {
         selectionActive: false,
@@ -281,7 +281,7 @@ const createStore = () =>
       const { nodes, edges, onNodesChange, onEdgesChange } = get();
 
       const nodesToUnselect = nodes.map((n) => {
-        n.isSelected = false;
+        n.selected = false;
         return createNodeOrEdgeSelectionChange(false)(n);
       }) as NodeChange[];
       const edgesToUnselect = edges.map(createNodeOrEdgeSelectionChange(false)) as EdgeChange[];
@@ -322,8 +322,8 @@ const createStore = () =>
     resetSelectedElements: () => {
       const { nodes, edges, onNodesChange, onEdgesChange } = get();
 
-      const nodesToUnselect = nodes.filter((e) => e.isSelected).map(createNodeOrEdgeSelectionChange(false));
-      const edgesToUnselect = edges.filter((e) => e.isSelected).map(createNodeOrEdgeSelectionChange(false));
+      const nodesToUnselect = nodes.filter((e) => e.selected).map(createNodeOrEdgeSelectionChange(false));
+      const edgesToUnselect = edges.filter((e) => e.selected).map(createNodeOrEdgeSelectionChange(false));
 
       if (nodesToUnselect.length) {
         onNodesChange?.(nodesToUnselect as NodeChange[]);
diff --git a/src/store/utils.ts b/src/store/utils.ts
index 9333a004..42704f21 100644
--- a/src/store/utils.ts
+++ b/src/store/utils.ts
@@ -44,7 +44,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
       height: node.height || null,
       position: node.position,
       positionAbsolute: node.position,
-      z: node.isDragging || node.isSelected ? 1000 : node.zIndex || 0,
+      z: node.dragging || node.selected ? 1000 : node.zIndex || 0,
     };
     if (node.parentNode) {
       internals.parentNode = node.parentNode;
@@ -57,7 +57,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
     const updatedInternals: NodeInternalsItem = nextNodeInternals.get(node.id)!;
 
     if (node.parentNode || parentNodes[node.id]) {
-      let startingZ = updatedInternals.z;
+      let startingZ = updatedInternals.z || 0;
 
       if (!startingZ) {
         if (parentNodes[node.id] && node.parentNode) {
@@ -69,7 +69,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
 
       const { x, y, z } = calculateXYZPosition(node, nextNodeInternals, parentNodes, {
         ...node.position,
-        z: startingZ as number,
+        z: startingZ,
       });
 
       updatedInternals.positionAbsolute = {
diff --git a/src/types/index.ts b/src/types/index.ts
index 5b99da4d..d37949b9 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -15,13 +15,13 @@ export type NodeDimensionChange = {
   dimensions?: Dimensions;
   position?: XYPosition;
   handleBounds?: NodeHandleBounds;
-  isDragging?: boolean;
+  dragging?: boolean;
 };
 
 export type NodeSelectionChange = {
   id: string;
   type: 'select';
-  isSelected: boolean;
+  selected: boolean;
 };
 export type NodeRemoveChange = {
   id: string;
@@ -74,8 +74,8 @@ export interface Node<T = any> {
   targetPosition?: Position;
   sourcePosition?: Position;
   isHidden?: boolean;
-  isSelected?: boolean;
-  isDragging?: boolean;
+  selected?: boolean;
+  dragging?: boolean;
   draggable?: boolean;
   selectable?: boolean;
   connectable?: boolean;
@@ -124,7 +124,7 @@ export interface Edge<T = any> {
   className?: string;
   sourceNode?: Node;
   targetNode?: Node;
-  isSelected?: boolean;
+  selected?: boolean;
   markerStart?: EdgeMarkerType;
   markerEnd?: EdgeMarkerType;
 }
@@ -153,7 +153,7 @@ export interface WrapEdgeProps<T = any> {
   data?: T;
   onClick?: (event: React.MouseEvent, edge: Edge) => void;
   onEdgeDoubleClick?: (event: React.MouseEvent, edge: Edge) => void;
-  isSelected: boolean;
+  selected: boolean;
   animated?: boolean;
   label?: string | ReactNode;
   labelStyle?: CSSProperties;
@@ -195,7 +195,7 @@ export interface EdgeProps<T = any> {
   sourceY: number;
   targetX: number;
   targetY: number;
-  isSelected?: boolean;
+  selected?: boolean;
   animated?: boolean;
   sourcePosition: Position;
   targetPosition: Position;
@@ -231,13 +231,13 @@ export interface NodeProps<T = any> {
   id: ElementId;
   type: string;
   data: T;
-  isSelected: boolean;
+  selected: boolean;
   isConnectable: boolean;
   xPos?: number;
   yPos?: number;
   targetPosition?: Position;
   sourcePosition?: Position;
-  isDragging?: boolean;
+  dragging?: boolean;
   dragHandle?: string;
   zIndex?: number;
 }
@@ -246,7 +246,7 @@ export interface NodeComponentProps<T = any> {
   id: ElementId;
   type: string;
   data: T;
-  isSelected?: boolean;
+  selected?: boolean;
   isConnectable: boolean;
   transform?: Transform;
   xPos?: number;
@@ -263,7 +263,7 @@ export interface NodeComponentProps<T = any> {
   onNodeDrag?: (node: Node) => void;
   onNodeDragStop?: (node: Node) => void;
   style?: CSSProperties;
-  isDragging?: boolean;
+  dragging?: boolean;
   dragHandle?: string;
   zIndex?: number;
 }
@@ -272,7 +272,7 @@ export interface WrapNodeProps<T = any> {
   id: ElementId;
   type: string;
   data: T;
-  isSelected: boolean;
+  selected: boolean;
   scale: number;
   xPos: number;
   yPos: number;
@@ -299,7 +299,7 @@ export interface WrapNodeProps<T = any> {
   isInitialized?: boolean;
   snapToGrid?: boolean;
   snapGrid?: SnapGrid;
-  isDragging?: boolean;
+  dragging?: boolean;
   resizeObserver: ResizeObserver | null;
   dragHandle?: string;
   zIndex: number;
@@ -410,7 +410,7 @@ export type NodePosUpdate = {
 export type NodeDiffUpdate = {
   id?: ElementId;
   diff?: XYPosition;
-  isDragging?: boolean;
+  dragging?: boolean;
 };
 
 export type FlowTransform = {
diff --git a/src/utils/changes.ts b/src/utils/changes.ts
index 89ac2037..64743226 100644
--- a/src/utils/changes.ts
+++ b/src/utils/changes.ts
@@ -9,7 +9,7 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an
     if (currentChange) {
       switch (currentChange.type) {
         case 'select': {
-          res.push({ ...item, isSelected: currentChange.isSelected });
+          res.push({ ...item, selected: currentChange.selected });
           return res;
         }
         case 'dimensions': {
@@ -24,8 +24,8 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an
             updateItem.position = currentChange.position;
           }
 
-          if (typeof currentChange.isDragging !== 'undefined') {
-            updateItem.isDragging = currentChange.isDragging;
+          if (typeof currentChange.dragging !== 'undefined') {
+            updateItem.dragging = currentChange.dragging;
           }
 
           res.push(updateItem);
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index d9055596..9ceba91d 100644
--- a/src/utils/graph.ts
+++ b/src/utils/graph.ts
@@ -149,7 +149,7 @@ export const getNodesInside = (
     height: rect.height / tScale,
   });
 
-  return nodes.filter(({ selectable = true, position, width, height, isDragging }) => {
+  return nodes.filter(({ selectable = true, position, width, height, dragging }) => {
     if (excludeNonSelectableNodes && !selectable) {
       return false;
     }
@@ -164,7 +164,7 @@ export const getNodesInside = (
       typeof height === 'undefined' ||
       width === null ||
       height === null ||
-      isDragging
+      dragging
     ) {
       // nodes are initialized with width and height = null
       return true;